HTML Table Fixed Header with Responsive Table Width

Question

I have a table with no fixed td widths and table width set to 100%. I want the table header to be fixed. I have found many solutions for fixed width like this one: JSFiddle

But it doesnt work for fluid width table, and when you decrease the viewport size it fails to achieve the functionality.

Any way to achieve responsive fixed width header?

My HTML is like this:

<table class="delegations-table">
    <thead>
        <tr class="del-head">
            <th>Région</th>
            <th>Ville / Quartier</th>
            <th>Lien</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><a href="#">Région de Rabat-Salé-Zemmour-Zaer</a></td>
            <td><a href="#">Délégation de Rabat</a></td>
            <td><a href="#"><img src="img/icons/del-icon.png" alt="" /></a></td>
        </tr>
        <tr>
            <td><a href="#">Région de Rabat-Salé-Zemmour-Zaer</a></td>
            <td><a href="#">Délégation de Sale</a></td>
            <td><a href="#"><img src="img/icons/del-icon.png" alt="" /></a></td>
        </tr>
        <tr>
            <td><a href="#">Région de Rabat-Salé-Zemmour-Zaer</a></td>
            <td><a href="#">Délégation de Temara</a></td>
            <td><a href="#"><img src="img/icons/del-icon.png" alt="" /></a></td>
        </tr>
        <tr>
            <td><a href="#">Région de Rabat-Salé-Zemmour-Zaer</a></td>
            <td><a href="#">Délégation de Touraga</a></td>
            <td><a href="#"><img src="img/icons/del-icon.png" alt="" /></a></td>
        </tr>
    </tbody>
</table>

My CSS is as follows:

.del-contain {
    max-height: 260px;
    width: 100%;
    overflow: auto;
}   

.delegations-table {
    width: 94%;
    margin: auto;
    position: relative;
}

.delegations-table th {
    color: #FFF;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    padding-left: 18px;
    line-height: 2;
}

.delegations-table tr td a {
    display:block;
    height:100%;
    width:100%;
}

.delegations-table tr.del-head {
    background: #3b8d3c!important;
}

.delegations-table td {padding: 5px 0 10px 18px;}
.delegations-table tr:hover {background: #ededed;}
.delegations-table td a {color: #000;}
.delegations-table td a:hover {text-decoration: none;}

added CSS please check

Alex Zahir
– Alex Zahir

2015-05-07 14:58:45 +00:00
Commented May 7, 2015 at 14:58 — Alex Zahir
– Alex Zahir, Commented May 7, 2015 at 14:58

Clay · Accepted Answer · 2015-05-07 15:13:11Z

2

Not sure if you want to resolve this with your own custom implementation, but the datatables plugin has fixed header responsive functionality that might be worth checking out.

http://datatables.net/

answered May 7, 2015 at 15:13

Clay

4784 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alex Zahir · Accepted Answer · 2015-05-08 10:31:47Z

I was able to come up with a solution for this using CSS absolute positioning.

See fiddle:

https://jsfiddle.net/u7vonqej/

The HTML:

  <div class="del-contain">
    <table class="delegations-table">
        <thead>
            <tr class="del-head">
                <th class="col1">Région</th>
                <th class="col2">Ville / Quartier</th>
                <th class="col3">Lien</th>
            </tr>
        </thead>
        <tbody>
            <br />
            <tr>
                <td class="col1"><a href="#">Région de Rabat-Salé-Zemmour-Zaer</a>
                </td>
                <td class="col2"><a href="#">Délégation de Rabat</a>
                </td>
                <td class="col3"><a href="#"><img src="img/icons/del-icon.png" alt="" /></a>
                </td>
            </tr>
            <tr>
                <td class="col1"><a href="#">Région de Rabat-Salé-Zemmour-Zaer</a>
                </td>
                <td class="col2"><a href="#">Délégation de Sale</a>
                </td>
                <td class="col3"><a href="#"><img src="img/icons/del-icon.png" alt="" /></a>
                </td>
            </tr>
            <tr>
                <td class="col1"><a href="#">Région de Rabat-Salé-Zemmour-Zaer</a>
                </td>
                <td class="col2"><a href="#">Délégation de Temara</a>
                </td>
                <td class="col3"><a href="#"><img src="img/icons/del-icon.png" alt="" /></a>
                </td>
            </tr>
            <tr>
                <td class="col1"><a href="#">Région de Rabat-Salé-Zemmour-Zaer</a>
                </td>
                <td class="col2"><a href="#">Délégation de Touraga</a>
                </td>
                <td class="col3"><a href="#"><img src="img/icons/del-icon.png" alt="" /></a>
                </td>
            </tr>
            <tr>
                <td class="col1"><a href="#">Région de Rabat-Salé-Zemmour-Zaer</a>
                </td>
                <td class="col2"><a href="#">Délégation de Khemisset</a>
                </td>
                <td class="col3"><a href="#"><img src="img/icons/del-icon.png" alt="" /></a>
                </td>
            </tr>
            <tr>
                <td class="col1"><a href="#">Région de du Grand Casablanca</a>
                </td>
                <td class="col2"><a href="#">Délégation de Mohammedia</a>
                </td>
                <td class="col3"><a href="#"><img src="img/icons/del-icon.png" alt="" /></a>
                </td>
            </tr>
            <tr>
                <td class="col1"><a href="#">Région de du Grand Casablanca</a>
                </td>
                <td class="col2"><a href="#">Délégation de Mohammedia</a>
                </td>
                <td class="col3"><a href="#"><img src="img/icons/del-icon.png" alt="" /></a>
                </td>
            </tr>
            <tr>
                <td class="col1"><a href="#">Région de du Grand Casablanca</a>
                </td>
                <td class="col2"><a href="#">Délégation de Mohammedia</a>
                </td>
                <td class="col3"><a href="#"><img src="img/icons/del-icon.png" alt="" /></a>
                </td>
            </tr>
            <tr>
                <td class="col1"><a href="#">Région de du Grand Casablanca</a>
                </td>
                <td class="col2"><a href="#">Délégation de Mohammedia</a>
                </td>
                <td class="col3"><a href="#"><img src="img/icons/del-icon.png" alt="" /></a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

The CSS:

.del-contain {
    max-height: 260px;
    width: 100%;
    position: relative;
}
.delegations-table {
    margin: auto;
    overflow: auto;
    max-height: 260px;
}
.delegations-table th {
    color: #FFF;
    font-family:'Open Sans', sans-serif;
    font-size: 15px;
    padding-left: 18px;
    line-height: 2;
}
.delegations-table tr td a {
    display:block;
    height:100%;
    width:100%;
}
.delegations-table tr.del-head {
    background: #3b8d3c!important;
}
.delegations-table td {
    padding: 5px 0 10px 18px;
}
.delegations-table tr:hover {
    background: #ededed;
}
.delegations-table td a {
    color: #000;
}
.delegations-table td a:hover {
    text-decoration: none;
}
.delegations-table tr.no-bg {
    background: 0 none;
}
/*--- Fixed Header Table ----*/
 .delegations-table {
    overflow-y:scroll;
    display:block;
}
.delegations-table thead {
    position:absolute;
    top:1px;
    left:0px;
    right:0px;
}
.delegations-table tbody {
    display:block;
    margin-top: 20px;
}
.delegations-table tr {
    width:100%;
    display:block;
    margin-top:-2px;
}
.delegations-table th {
    position:absolute;
    background: green;
}
.delegations-table td {
    display:inline-block;
}
.col1 {
    width:40%;
}
.col2 {
    width:30%;
}
.col3 {
    width:20%;
}
th.col1 {
    left:0px;
    right:80%;
}
th.col2 {
    left:40%;
    right:70%;
}
th.col3 {
    left:70%;
    right:50%;
}
@media screen and (max-width: 468px) {
    table.delegations-table th {
        height: 55px;
    }
    .delegations-table tbody {
        margin-top: 40px;
    }
}
@media screen and (max-width: 420px) {
    .delegations-table .col2 {
        padding-left: 15px;
    }
    .delegations-table .col3 {
        padding-left: 10px;
    }
}
a {
    text-decoration: none;
}

The th and td are not aligned and have wildly different widths in this example. Is there any responsive solution for this problem?

Collectives™ on Stack Overflow

HTML Table Fixed Header with Responsive Table Width

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related