HTML table scrollbar issue

Question

In the following code I tried to make a long table scrollable ( with <thead> fixed ).

But the columns are not filling the table's width anymore, and thead columns are even not aligned with tbodys ones.

How to solve this ? is there another way to do the trick.

<table>
    <thead>
        <tr>
            <th>ROW 01</th>
            <th>ROW 02</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>LINE 01</td><td><img src="http://placehold.it/90x90"/></td></tr>
        <tr><td>LINE 02</td><td><img src="http://placehold.it/90x90"/></td></tr>
        <tr><td>LINE 03</td><td><img src="http://placehold.it/90x90"/></td></tr>
    </tbody>
</table>

CSS here

table{width: 100%; background: #efefef; border-collapse: collapse }
thead, tbody{display: block}
thead{background: #555; color: white;}
tbody{height: 120px; overflow: auto}
td, th{ border: 1px solid red; }

can you give your td & th a fixed width? (i.e. width: 100px; or 50%)? — blurfus
– blurfus, Commented Aug 15, 2014 at 19:50
Remove thead, tbody{display: block} jsfiddle.net/fr3gqbqh/6 — Paramasivan
– Paramasivan, Commented Aug 15, 2014 at 19:55

G-Cyrillus · Accepted Answer · 2014-08-15 20:20:54Z

3

You can try to turn your <tr> in display:table;+table-layout:fixed; It will help but columns may break from a row to another unless you set a fixed width to one or the other cell. DEMO

Your CSS turns like:

table {
    width: 100%;
    background: #efefef;
    border-collapse: collapse
}
thead, tbody {
    display: block
}
thead {
    background: #555;
    color: white;
    padding-right:1em;/* average width of the scroll bar of tbody */
}
tbody {
    height: 120px;
    overflow: auto
}
tr {/* here make those the table */
    display:table;
    table-layout:fixed;
    width:100%;
}
td, th {/* set a width to go along with table-layout */
    border: 1px solid red;
}

answered Aug 15, 2014 at 20:20

G-Cyrillus

107k14 gold badges116 silver badges135 bronze badges

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

3 Comments

G-Cyrillus Over a year ago

box-sizing:border-box; will include borders into specified width : jsfiddle.net/fr3gqbqh/11

Ghilas BELHADJ Over a year ago

yes, seems to be a good solution, but the horizontal borders are not collapsed

G-Cyrillus Over a year ago

you can fix it removing border-top in tbody tbody tr td {border-top:none;} jsfiddle.net/fr3gqbqh/16

Devin · Accepted Answer · 2014-08-15 20:20:34Z

1

add this to your CSS

td:nth-child(1), th:nth-child(1) { min-width: 200px; } /* or the width you need, you may use percentages */ td:nth-child(2), th:nth-child(2) { min-width: 200px; }

since the browser adds a scrollbar, it needs to add the space for that element, thus, the misalignment will ALWAYS happen. The good news is that, in fact, you need to declare only the first column, so if you plan to use only 1 columns, just use something like this:

td:nth-child(1), th:nth-child(1) { width:20%; min-width: 200px; }

and it will be enough.

There's no way that I know to do this without declaring the width for AT LEAST the first column

answered Aug 15, 2014 at 20:20

Devin

7,7306 gold badges43 silver badges56 bronze badges

Comments

user3575812 · Accepted Answer · 2014-08-15 20:33:53Z

-1

try

thead, tbody{display:auto}

answered Aug 15, 2014 at 20:33

user3575812

3002 silver badges12 bronze badges

Collectives™ on Stack Overflow

HTML table scrollbar issue

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related