How to make fixed header table inside scrollable div?
Using position: sticky
on th
will do the trick.
Note: if you use position: sticky
on thead
or tr
, it won't work.
https://jsfiddle.net/hrg3tmxj/
How about doing something like this? I've made it from scratch...
What I've done is used 2 tables, one for header, which will be static always, and the other table renders cells, which I've wrapped using a div
element with a fixed height, and to enable scroll, am using overflow-y: auto;
Also make sure you use table-layout: fixed;
with fixed width td
elements so that your table
doesn't break when a string without white space
is used, so inorder to break that string am using word-wrap: break-word;
Demo
.wrap {
width: 352px;
}
.wrap table {
width: 300px;
table-layout: fixed;
}
table tr td {
padding: 5px;
border: 1px solid #eee;
width: 100px;
word-wrap: break-word;
}
table.head tr td {
background: #eee;
}
.inner_table {
height: 100px;
overflow-y: auto;
}
<div class="wrap">
<table class="head">
<tr>
<td>Head 1</td>
<td>Head 1</td>
<td>Head 1</td>
</tr>
</table>
<div class="inner_table">
<table>
<tr>
<td>Body 1</td>
<td>Body 1</td>
<td>Body 1</td>
</tr>
<!-- Some more tr's -->
</table>
</div>
</div>