Looking at this demo, you'll notice that the header remains fixed.
However, my issue lies in getting the absolute <div> inside the <th> to occupy 100% of the width of the <th>
When I set width: 100% for the <div>, it expands to utilize all available width.
Applying position: relative to the <th> causes the <div> to seemingly disappear (appears below the <th>) and even adjusting z-index doesn't help.
Note: No use of JS, only HTML/CSS
html, body{
margin:0;
padding:0;
height:100%;
}
section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #500;
}
.container {
overflow-y: auto;
height: 200px;
}
table {
border-spacing: 0;
width:100%;
}
td + td {
border-left:1px solid #eee;
}
td, th {
border-bottom:1px solid #eee;
background: #ddd;
color: #000;
padding: 10px 25px;
}
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th > div{
position: absolute;
background: transparent;
color: #fff;
padding: 9px 25px;
top: 0;
margin-left: -25px;
line-height: normal;
border-left: 1px solid #800;
}
th:first-child div{
border: none;
}<section class="">
<div class="container">
<table>
<thead>
<tr>
<th>
Table attribute name
<div>Table attribute name</div>
</th>
<th>
Value
<div>Value</div>
</th>
<th>Test<div>
Test
</div></th>
<th>
Description
<div>Description</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>align</td>
<td>left, center, right</td>
<td></td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
</tr>
...
</tbody>
</table>
</div>
</section>I've attempted following this solution, but encountered column widths being equal and alignment issues with certain content breaking the layout.