表格布局固定 - 当位置是绝对的

Question

我有一个 div 里面的表，

 <div class="divScroll">
  <table class="table1">
  <tr class="tableHeader">
   <th>Header1</th>
   <th>Header2</th>
   <th>Header3</th>
   <th>Header4</th>
   <th>Header5</th>
   </tr>
  <tr>
   <td>Data1</td>
   <td>Data2</td>
   <td>Data3</td>
   <td>Data4</td>
   <td>Data5</td>
   </tr>
   .....
   .....
  </table>
 </div>

我的 CSS，

 .divScroll
 {
   height: 25px;
   overflow-y: auto;
   width: 100%
 }

 .table1
 {
   width: 100%;
   table-layout: fixed;
 }

 .tableHeader
 {
   position: absolute;
 }

在上面的 coed 中，我正在尝试使用固定标题使表格可滚动。这意味着当用户滚动顶部-> 底部表格标题应保持固定时，仅应滚动表格数据。

我可以实现，可滚动表，但问题是 th col 宽度与 td col 宽度不对齐，因为我应用了 Position : absolute for 'th'。

如何使 th 和 td col 宽度正确对齐？

Answer 1

这是一个非常常见的问题，过去已经回答过了。

这里有一些本地资源：

• Table header to stay fixed at the top when user scrolls it out of view with jQuery
• Table with fixed header and fixed column on pure css

这里还有另一个外部：

• Fixed Header Table