Question

如何创建一个具有固定头部的可滚动主体的表格，每个头部的大小与其关联列相同，并且每列的宽度与其他列的宽度不同。

例如，我有这张表

  table thead tr {
  display: block;
}

table th,
table td {
  width: 100px; //fixed width
}

table tbody {
  display: block;
  height: 200px;
  overflow: auto; //set tbody to auto
}

 <table border='1'>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
      <th>Column 6</th>
      <th>Column 7</th>
      <th>Column 8</th>
      <th>Column 9</th>
      <th>Column 10</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
    </tr>
    <tr>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
    </tr>
    <tr>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
    </tr>
    <tr>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
    </tr>
    <tr>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
    </tr>
    <tr>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
    </tr>
    <tr>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
    </tr>
    <tr>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
    </tr>
    <tr>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
    </tr>
    <tr>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
    </tr>
    <tr>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
    </tr>
    <tr>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
    </tr>
    <tr>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
    </tr>
    <tr>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
    </tr>
    <tr>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
      <td>Looooooong</td>
      <td>Very Looooooooooong</td>
      <td>short</td>
    </tr>
  </tbody>
</table>

标题的位置和大小与其关联的列不匹配。是否有修复我的方法或其他方法来实现我的目标没有这个问题？

如何使用Scrolled tbody修复thead的位置

0 个答案: