CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Kevin
Kevin

Reputation: 1614

Fix table header at top of scrollable div

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>

Upvotes: 0

Views: 2508

Answers (1)

Tony Ray Tansley
Tony Ray Tansley

Reputation: 669

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/

Upvotes: 1

Related Questions