有没有一种方法可以锁定/使表格组件的标题保持不变,只允许行滚动?
最佳答案
我通常解决这个问题的一种方法是使用 Sticky Method,就像这样
虽然这有一个主要缺点,但 IE6-IE10 不支持 Sticky 在此处查看支持,看看您是否有兴趣使用它 我目前正在研究不同的方法。 enter link description here
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>
关于javascript - Buefy:锁定表头并仅使行可滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54380571/