Table with flexible fixed header row and scrollable body [duplicate] - html

Question

This question already has answers here:
HTML table with 100% width, with vertical scroll inside tbody
(13 answers)
Closed 7 years ago.
I want to fix the first row and the scrollable body. When I like to fix with the css like this
thead
{
display: block;
width: 500px;
}
tbody
{
display: block;
width: 500px;
height: 200px;
overflow: auto !important;
}
But the headers are disaligned. the column and the rows are disaligned.
th,td
{
width:50px;
}
I really don't like to fix the <th> element with the 'width' property. I want that as flexible. Any idea for that flexible fixed header?

Answer 1

try to use in your style may help you
<style>
html, body{
margin:0;
padding:0;
height:100%;
}
section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #500;
}
section.positioned {
position: absolute;
top:100px;
left:100px;
width:800px;
box-shadow: 0 0 15px #333;
}
.container {
overflow-y: auto;
}
table {
border-spacing: 0;
width:100%;s
}
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;
}
</style>
in html
<section>
<div class="container">
<table>
<thead>
<tr class="header">
<th>
Table attribute name
<div>Table attribute name</div>
</th>
<th>
Value
<div>Value</div>
</th>
<th>
Description
<div>Description</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>align</td>
<td>left, center, right</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
</tr>
<tr>
<td>bgcolor</td>
<td>rgb(x,x,x), #xxxxxx, colorname</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
</tr>
<tr>
<td>border</td>
<td>1,""</td>
<td>Specifies whether the table cells should have borders or not</td>
</tr>
</tbody>
</table>
</div>
</section>