具有固定标题的HTML表？

Question

是否有跨浏览器的CSS / JavaScript技术来显示较长的HTML表，以使列标题在屏幕上保持固定并且不随表主体滚动。考虑一下Microsoft
Excel中的“冻结窗格”效果。

我希望能够滚动浏览表的内容，但始终能够看到顶部的列标题。

Answer 1

一段时间以来，我一直在寻找解决方案，但发现大多数答案都不起作用或不适合我的情况，因此我用jQuery写了一个简单的解决方案。

这是解决方案概述：

1. 克隆需要具有固定标题的表，然后将克隆的副本放在原始副本的顶部。
2. 从顶部桌子上取下桌子主体。
3. 从底部表格中删除表格标题。
4. 调整列宽。（我们会跟踪原始列宽）

以下是可运行演示中的代码。

function scrolify(tblAsJQueryObject, height) {

  var oTbl = tblAsJQueryObject;



  // for very large tables you can remove the four lines below

  // and wrap the table with <div> in the mark-up and assign

  // height and overflow property

  var oTblDiv = $("<div/>");

  oTblDiv.css('height', height);

  oTblDiv.css('overflow', 'scroll');

  oTbl.wrap(oTblDiv);



  // save original width

  oTbl.attr("data-item-original-width", oTbl.width());

  oTbl.find('thead tr td').each(function() {

    $(this).attr("data-item-original-width", $(this).width());

  });

  oTbl.find('tbody tr:eq(0) td').each(function() {

    $(this).attr("data-item-original-width", $(this).width());

  });





  // clone the original table

  var newTbl = oTbl.clone();



  // remove table header from original table

  oTbl.find('thead tr').remove();

  // remove table body from new table

  newTbl.find('tbody tr').remove();



  oTbl.parent().parent().prepend(newTbl);

  newTbl.wrap("<div/>");



  // replace ORIGINAL COLUMN width

  newTbl.width(newTbl.attr('data-item-original-width'));

  newTbl.find('thead tr td').each(function() {

    $(this).width($(this).attr("data-item-original-width"));

  });

  oTbl.width(oTbl.attr('data-item-original-width'));

  oTbl.find('tbody tr:eq(0) td').each(function() {

    $(this).width($(this).attr("data-item-original-width"));

  });

}



$(document).ready(function() {

  scrolify($('#tblNeedsScrolling'), 160); // 160 is height

});


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>



<div style="width:300px;border:6px green solid;">

  <table border="1" width="100%" id="tblNeedsScrolling">

    <thead>

      <tr><th>Header 1</th><th>Header 2</th></tr>

    </thead>

    <tbody>

      <tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr>

      <tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr>

      <tr><td>row 3, cell 1</td><td>row 3, cell 2</td></tr>

      <tr><td>row 4, cell 1</td><td>row 4, cell 2</td></tr>

      <tr><td>row 5, cell 1</td><td>row 5, cell 2</td></tr>

      <tr><td>row 6, cell 1</td><td>row 6, cell 2</td></tr>

      <tr><td>row 7, cell 1</td><td>row 7, cell 2</td></tr>

      <tr><td>row 8, cell 1</td><td>row 8, cell 2</td></tr>

    </tbody>

  </table>

</div>

此解决方案可在Chrome和IE中使用。由于它基于jQuery，因此它也应该在其他受jQuery支持的浏览器中也可以使用。