javascript - Buefy：锁定表头并仅使行可滚动

Question

有没有一种方法可以锁定/使表格组件的标题保持不变并且只允许行滚动？

Answer 1

我通常解决这个问题的一种方法是使用粘性方法，像这样

不过，这有一个主要缺点，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>