fixed thead doesnt match tbody

Question

I got my code sample saved on https://jsfiddle.net/n7ynjs1t/

All what I need is a simple normal table even with thead fixed on scroll.

CSS:

table {
  width: 100%;
}

thead {
  width: 100%;
  display: table;
}

tbody {
  overflow: auto;
  height: 200px;
  display: block;
}

td {
  width: 100px;
}

HTML:

<thead>
     <td width=100 align='center'> id </td>
     <td width=100 align='center'> head1 </td>
     <td width=100 align='center'> head2 </td>
     <td width=100 align='center'> head3 </td>
     <td width=100 align='center'> head4 </td>
     <td width=100 align='center'> head5 </td>
     <td width=100 align='center'> head6 </td>
     <td width=100 align='center'> head7 </td>
     <td width=100 align='center'> head8 </td>
     <td width=100 align='center'> head9 </td>
     <td width=100 align='center'> head10</td>
     <td width=100 align='center'> head11</td>
</thead>
<tr>
    <td width=100 align='center'> id </td>
    <td width=100 align='center'> 1 </td>
    <td width=100 align='center'> 2 </td>
    <td width=100 align='center'> 3 </td>
    <td width=100 align='center'> 4 </td>
    <td width=100 align='center'> 5 </td>
    <td width=100 align='center'> 6 </td>
    <td width=100 align='center'> 7 </td>
    <td width=100 align='center'> 8 </td>
    <td width=100 align='center'> 9 </td>
    <td width=100 align='center'> 0 </td>
    <td width=100 align='center'> 11</td>
</tr>

// The same table rows repeats many times

</tbody>
</table>

table-layout + average 1.2em for the scrollbar https://jsfiddle.net/n7ynjs1t/4/ should do it see http://stackoverflow.com/questions/23989463/how-to-set-tbody-height-with-overflow-scroll/23989771#23989771 maybe even a duplicate — G-Cyrillus, Nov 20 '16 at 21:59
You're missing a `` inside the ``, and you know that cell-elements in `` isn't `` but ``, right? And why are you putting `width` and `align` in the table itself? Just use CSS? Since they're all the same size, it should be very simple to fix this. — junkfoodjunkie, Nov 20 '16 at 22:49

Fred · Answer 1 · 2016-11-20T22:19:39.057

I think the closest you will get is this.

You will not be able to "auto size" the headers with the table cells and vice versa, so those widths should be "hard coded".

Also, to make the headers "fit" and make up for the body's scrollbar, add padding. in the below code I added a padding of "15px" for the "thead", who does not have a scrollbar.

EDIT: Here's a fiddle: https://jsfiddle.net/FredM7/25abq8gf/

See this full HTML:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style>
            table {
                width: 200px;
                background: green;
            }

            table tbody, table thead
            {
                display: block;
            }

            table thead 
            {
               padding-right: 15px;
            }

            table tbody 
            {
               overflow: auto;
               height: 100px;
            }

            thead th, tbody td {
                width: 72px;
                text-align: left;
            }
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>
                        Head 1
                    </th>
                    <th>
                        Head 2
                    </th>
                    <th>
                        Head 3
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td><td>2</td><td>3</td>
                </tr>
                <tr>
                    <td>1</td><td>2</td><td>3</td>
                </tr>
                <tr>
                    <td>1</td><td>2</td><td>3</td>
                </tr>
                <tr>
                    <td>1</td><td>2</td><td>3</td>
                </tr>
                <tr>
                    <td>1</td><td>2</td><td>3</td>
                </tr>
                <tr>
                    <td>1</td><td>2</td><td>3</td>
                </tr>
                <tr>
                    <td>1</td><td>2</td><td>3</td>
                </tr>
                <tr>
                    <td>1</td><td>2</td><td>3</td>
                </tr>
                <tr>
                    <td>1</td><td>2</td><td>3</td>
                </tr>
                <tr>
                    <td>1</td><td>2</td><td>3</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

fixed thead doesnt match tbody

1 Answers1