JSFiddle - React, Tailwind, and code Playground
HTML
Таблица с фиксированным заголовком
<div class="DivFixTable">
<table class="gradient">
<col width=100> <col width=120> <col width=100> <col width=120>
<tr><th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th><th>Заголовок 4</th></tr>
</table>
<div class="Tdata">
<table id="MyTable">
<col width=100> <col width=120> <col width=100> <col width=120>
<tr><td>1 строка</td><td>12345</td><td>12345</td><td>12345</td></tr>
<tr><td>2 строка</td><td>12345</td><td>12345</td><td>12345</td></tr>
<tr><td>3 строка</td><td>12345</td><td>12345</td><td>12345</td></tr>
<tr><td>4 строка</td><td>12345</td><td>12345</td><td>12345</td></tr>
<tr><td>5 строка</td><td>12345</td><td>12345</td><td>12345</td></tr>
<tr><td>6 строка</td><td>12345</td><td>12345</td><td>12345</td></tr>
<tr><td>7 строка</td><td>12345</td><td>12345</td><td>12345</td></tr>
</table>
</div>
</div>
CSS
* {
font-family:arial,sans-serif;
font-size:10pt;
}
table {
border-collapse:collapse;
table-layout:fixed;
width:100%;
}
td, th{
padding:2px 4px;
border-left:1px solid #c5c5c5;
border-bottom:1px solid #c5c5c5;
height:16px;
}
td:first-child, th:first-child {border-left:0;}
.DivFixTable {
width:440px;
margin-top:3px;
border:1px solid #c5c5c5;
}
.gradient {
background:#EFEFEF;
}
.Tdata {
height:104px;
width:100%;
overflow-y:auto;
overflow-x:hidden;
}