带有固定标题的 HTML 表格? [英] HTML table with fixed headers?

问题描述

是否有跨浏览器的 CSS/JavaScript 技术来显示长 HTML 表格，以便列标题固定在屏幕上并且不随表格主体滚动.想想 Microsoft Excel 中的冻结窗格"效果.

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

解决方案

我找了一段时间的解决方案，发现大部分答案都不起作用或不适合我的情况，所以我写了一个简单的解决方案使用 jQuery.

这是解决方案大纲:

1. 克隆需要有固定表头的表，并放置在原件之上复制副本.
2. 从顶部表格中移除表格主体.
3. 从底部表格中删除表格标题.
4. 调整列宽.(我们跟踪原始列宽)

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

function scrolify(tblAsJQueryObject, height) {var oTbl = tblAsJQueryObject;//对于非常大的表，您可以删除下面的四行//并用 
 包裹表格在标记和分配中//高度和溢出属性var oTblDiv = $("
");oTblDiv.css('height', height);oTblDiv.css('溢出', '滚动');oTbl.wrap(oTblDiv);//保存原始宽度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());});//克隆原表var newTbl = oTbl.clone();//从原始表中删除表头oTbl.find('thead tr').remove();//从新表中删除表体newTbl.find('tbody tr').remove();oTbl.parent().parent().prepend(newTbl);newTbl.wrap("
");//替换原始列宽度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 是高度});

<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"><头><tr><th>首部1</th><th>首部2</th></tr></thead><tr><td>第1行，单元格1</td><td>第1行，单元格2</td></tr><tr><td>第2行，单元格1</td><td>第2行，单元格2</td></tr><tr><td>第3行，单元格1</td><td>第3行，单元格2</td></tr><tr><td>第4行，单元格1</td><td>第4行，单元格2</td></tr><tr><td>第5行，单元格1</td><td>第5行，单元格2</td></tr><tr><td>第6行，单元格1</td><td>第6行，单元格2</td></tr><tr><td>第7行，单元格1</td><td>第7行，单元格2</td></tr><tr><td>第8行，单元格1</td><td>第8行，单元格2</td></tr></tbody>

此解决方案适用于 Chrome 和 IE.由于它基于 jQuery，因此这应该也适用于其他支持 jQuery 的浏览器.

Is there a cross-browser CSS/JavaScript technique to display a long HTML table such that the column headers stay fixed on-screen and do not scroll with the table body. Think of the "freeze panes" effect in Microsoft Excel.

I want to be able to scroll through the contents of the table, but to always be able to see the column headers at the top.

解决方案

I was looking for a solution for this for a while and found most of the answers are not working or not suitable for my situation, so I wrote a simple solution with jQuery.

This is the solution outline:

1. Clone the table that needs to have a fixed header, and place the cloned copy on top of the original.
2. Remove the table body from top table.
3. Remove the table header from bottom table.
4. Adjust the column widths. (We keep track of the original column widths)

Below is the code in a runnable demo.

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>

This solution works in Chrome and IE. Since it is based on jQuery, this should work in other jQuery supported browsers as well.

这篇关于带有固定标题的 HTML 表格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！