Fix table header at top of scrollable div

Question

The div in this example is scrollable, how do I make the header of the table fixed to the top of the div?

<div id="table" style="overflow: auto; border: 1px solid;">
            <table id="table_id">
               <tr>
                  <th>A</th>
                  <th>B</th>
               </tr>

               <tr>
                  <td>A</td>
                  <td>B</td>
               </tr>

            </table>
</div>

By "fixed" do you mean that the table rows will scroll up/down but the table header will stick to the top? — Abraar Arique Diganto, Jul 15 '15 at 14:57
possible duplicate of [How to make fixed header table inside scrollable div?](http://stackoverflow.com/questions/17827908/how-to-make-fixed-header-table-inside-scrollable-div) — Zakaria Acharki, Jul 15 '15 at 14:58
Maybe put your header row in a `` element and style that with a `position:fixed;` — zgood, Jul 15 '15 at 14:58

Tony Ray Tansley · Answer 1 · 2015-07-15T16:03:22.950

I would split into 2 sections and dictate the widths (% if responsive).

<table id="table-top">
<tr>
<th>A</th>
<th>B</th>
</tr>
</table>
<div id="table">
<table id="table_id">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
</div>

CSS....

#table{
    overflow-y: auto; 
    height:150px;
    border-bottom:1px solid grey;
}
table{
    width:100%;
}
table td, table th{
    border-color: grey;
    border: 1px solid;  
    width:50%;
}

https://jsfiddle.net/tonytansley/mvp4u54q/

Fix table header at top of scrollable div

1 Answers1

Linked