JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<thead>
<tr>
<th>Type</th>
<th>Item</th>
<th>Speed dial</th>
<th>Params</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>11</td>
<td>111</td>
<td>1111</td>
</tr>
<tr>
<td>1</td>
<td>11</td>
<td>111</td>
<td>1111</td>
</tr>
<tr>
<td>1</td>
<td>11</td>
<td>111</td>
<td>1111</td>
</tr>
<tr>
<td>1</td>
<td>11</td>
<td>111</td>
<td>1111</td>
</tr>
<tr>
<td>1</td>
<td>11</td>
<td>111</td>
<td>1111</td>
</tr>
<tr>
<td>1</td>
<td>11</td>
<td>111</td>
<td>1111</td>
</tr>
<tr>
<td>1</td>
<td>11</td>
<td>111</td>
<td>1111</td>
</tr>
<tr>
<td>1</td>
<td>11</td>
<td>111</td>
<td>1111</td>
</tr>
<tr>
<td>1</td>
<td>11</td>
<td>111</td>
<td>1111</td>
</tr>
<tr>
<td>1</td>
<td>11</td>
<td>111</td>
<td>1111</td>
</tr>
<tr>
<td>1</td>
<td>11</td>
<td>111</td>
<td>1111</td>
</tr>
<tr>
<td>1</td>
<td>11</td>
<td>111</td>
<td>1111</td>
</tr>
</tbody>
</table>
CSS
* {
margin: 0;
padding: 0;
}
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
table thead {
position: fixed;
width: 100%;
top: 0;
}
table td {
background: #fff;
border: 1px solid #999;
}
table th {
background: #ccc;
border: 1px solid #333;
}
JavaScript
function fixed() {
$('table').css({'margin-top': $('table thead').height()});
$('table thead tr')
.children()
.each(function(index, element) {
var cell = $('table tbody tr').eq(0).children().eq(index),
width = parseInt(cell.width()) + 2;
$(element).css({'width': width});
});
}
$(document).ready(fixed);
$(window).resize(fixed);