Один из способов, которыми я обычно решаю эту проблему, - это использование Sticky Method, например,
. * * * * * * * * * * * * * * * * * * * * * * * * * * * «IE», «IE6-IE10», «Sticky» не поддерживается.Из поддержки здесь, чтобы увидеть, если вы были бы заинтересованы в использовании этого, я в настоящее время смотрю по-разному. введите описание ссылки здесь
table
{
Position: relative;
width: 100%;
text-align: center;
}
thead, th
{
background: black;
color: white;
border: none;
margin: 0;
padding: 0;
position: sticky;
top: 0;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>State</th>
<th>Employeed</th>
</tr>
</thead>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<table>