css 怎么让表格的头部和第一栏悬浮

Question

类似excel中的
然后想要让头部和姓名的悬浮

<table border="1">
<tr>
  <th>姓名</th>
  <th colspan="4">信息</th>
</tr>
<tr>
  <td>WANG XIAO MING</td>
  <td>123456789</td>
  <td>[e-mail]</td>
  <td>BEIJING</td>
  <td>12345678</td>
</tr>
<tr>
  <td>WANG XIAO MING</td>
  <td>123456789</td>
  <td>[e-mail]</td>
  <td>BEIJING</td>
  <td>12345678</td>
</tr>
<tr>
  <td>WANG XIAO MING</td>
  <td>123456789</td>
  <td>[e-mail]</td>
  <td>BEIJING</td>
  <td>12345678</td>
</tr>
</table>

姓名	信息
WANG XIAO MING	123456789	[e-mail]	BEIJING	12345678
WANG XIAO MING	123456789	[e-mail]	BEIJING	12345678
WANG XIAO MING	123456789	[e-mail]	BEIJING	12345678

Answer 1

一个table做不到，各大表格插件也都是计算宽高，使用多个table进行组合，如果表格比较复杂，建议使用插件，不复杂可以使用两个表格，然后使用百分比设置colgroup宽度，或者使用其他元素如li模拟表格

Answer 2

需要js和JQ(jquery-1.8.0.min.js)配合

freezeRowNum 固定多少行表头（多表头）
freezeColumnNum固定多少列（重左到右）

html位置：

<table id="table" width="600" freezeRowNum="1" freezeColumnNum="1" cellspacing="0" cellpadding="0">

...
</table>

table-lock.js

      /*
  * 锁定表头和列
  * 
  * 参数定义
  *   table - 要锁定的表格元素或者表格ID
  *   freezeRowNum - 要锁定的前几行行数，如果行不锁定，则设置为0
  *   freezeColumnNum - 要锁定的前几列列数，如果列不锁定，则设置为0
  *   width - 表格的滚动区域宽度
  *   height - 表格的滚动区域高度
  */
  function freezeTable(table, freezeRowNum, freezeColumnNum, width, height) {
    if (typeof(freezeRowNum) == 'string')
      freezeRowNum = parseInt(freezeRowNum)
      
    if (typeof(freezeColumnNum) == 'string')
      freezeColumnNum = parseInt(freezeColumnNum)

    var tableId;
    if (typeof(table) == 'string') {
      tableId = table;
      table = $('#' + tableId);
    } else
      tableId = table.attr('id');
      
    var divTableLayout = $("#" + tableId + "_tableLayout");
    
    if (divTableLayout.length != 0) {
      divTableLayout.before(table);
      divTableLayout.empty();
    } else {
      table.after("<div id='" + tableId + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>");
      
      divTableLayout = $("#" + tableId + "_tableLayout");
    }
    
    var html = '';
    if (freezeRowNum > 0 && freezeColumnNum > 0)
      html += '<div id="' + tableId + '_tableFix" style="padding: 0px;"></div>';
      
    if (freezeRowNum > 0)
      html += '<div id="' + tableId + '_tableHead" style="padding: 0px;"></div>';
      
    if (freezeColumnNum > 0)
      html += '<div id="' + tableId + '_tableColumn" style="padding: 0px;"></div>';
      
    html += '<div id="' + tableId + '_tableData" style="padding: 0px;"></div>';
    
    
    $(html).appendTo("#" + tableId + "_tableLayout");
    
    var divTableFix = freezeRowNum > 0 && freezeColumnNum > 0 ? $("#" + tableId + "_tableFix") : null;
    var divTableHead = freezeRowNum > 0 ? $("#" + tableId + "_tableHead") : null;
    var divTableColumn = freezeColumnNum > 0 ? $("#" + tableId + "_tableColumn") : null;
    var divTableData = $("#" + tableId + "_tableData");
    
    divTableData.append(table);
    
    if (divTableFix != null) {
      var tableFixClone = table.clone(true);
      tableFixClone.attr("id", tableId + "_tableFixClone");
      divTableFix.append(tableFixClone);
    }
    
    if (divTableHead != null) {
      var tableHeadClone = table.clone(true);
      tableHeadClone.attr("id", tableId + "_tableHeadClone");
      divTableHead.append(tableHeadClone);
    }
    
    if (divTableColumn != null) {
      var tableColumnClone = table.clone(true);
      tableColumnClone.attr("id", tableId + "_tableColumnClone");
      divTableColumn.append(tableColumnClone);
    }
    
    $("#" + tableId + "_tableLayout table").css("margin", "0");
    
    if (freezeRowNum > 0) {
      var HeadHeight = 0;
      var ignoreRowNum = 0;
      $("#" + tableId + "_tableHead tr:lt(" + freezeRowNum + ")").each(function () {
        if (ignoreRowNum > 0)
          ignoreRowNum--;
        else {
          var td = $(this).find('td:first, th:first');
          HeadHeight += td.outerHeight(true);
          
          ignoreRowNum = td.attr('rowSpan');
          if (typeof(ignoreRowNum) == 'undefined')
            ignoreRowNum = 0;
          else
            ignoreRowNum = parseInt(ignoreRowNum) - 1;
        }
      });
      HeadHeight += 2;
      
      divTableHead.css("height", HeadHeight);
      divTableFix != null && divTableFix.css("height", HeadHeight);
    }
    
    if (freezeColumnNum > 0) {
      var ColumnsWidth = 0;
      var ColumnsNumber = 0;
      $("#" + tableId + "_tableColumn tr:eq(" + freezeRowNum + ")").find("td:lt(" + freezeColumnNum + "), th:lt(" + freezeColumnNum + ")").each(function () {
        if (ColumnsNumber >= freezeColumnNum)
          return;
          
        ColumnsWidth += $(this).outerWidth(true);
        
        ColumnsNumber += $(this).attr('colSpan') ? parseInt($(this).attr('colSpan')) : 1;
      });
      ColumnsWidth += 2;

      divTableColumn.css("width", ColumnsWidth);
      divTableFix != null && divTableFix.css("width", ColumnsWidth);
    }
    
    divTableData.scroll(function () {
      divTableHead != null && divTableHead.scrollLeft(divTableData.scrollLeft());
      
      divTableColumn != null && divTableColumn.scrollTop(divTableData.scrollTop());
    });
    
    divTableFix != null && divTableFix.css({ "overflow": "hidden", "position": "absolute", "z-index": "50" });
    divTableHead != null && divTableHead.css({ "overflow": "hidden", "width": width - 6, "position": "absolute", "z-index": "45" });
    divTableColumn != null && divTableColumn.css({ "overflow": "hidden", "height": height - 17, "position": "absolute", "z-index": "40" });
    divTableData.css({ "overflow": "scroll", "width": width, "height": height , "position": "absolute" });
    
    divTableFix != null && divTableFix.offset(divTableLayout.offset());
    divTableHead != null && divTableHead.offset(divTableLayout.offset());
    divTableColumn != null && divTableColumn.offset(divTableLayout.offset());
    divTableData.offset(divTableLayout.offset());
  }

  /*
  * 调整锁定表的宽度和高度，这个函数在resize事件中调用
  * 
  * 参数定义
  *   table - 要锁定的表格元素或者表格ID
  *   width - 表格的滚动区域宽度
  *   height - 表格的滚动区域高度
  */
  function adjustTableSize(table, width, height) {
    var tableId;
    if (typeof(table) == 'string')
      tableId = table;
    else
      tableId = table.attr('id');
    
    $("#" + tableId + "_tableLayout").width(width).height(height);
    $("#" + tableId + "_tableHead").width(width - 17);
    $("#" + tableId + "_tableColumn").height(height - 17);
    $("#" + tableId + "_tableData").width(width).height(height);
  }

  function pageHeight() {
    if ($.browser.msie) {
      return document.compatMode == "CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;
    } else {
      return self.innerHeight;
    }
  };

  //返回当前页面宽度
  function pageWidth() {
    if ($.browser.msie) {
      return document.compatMode == "CSS1Compat" ? document.documentElement.clientWidth : document.body.clientWidth;
    } else {
      return self.innerWidth;
    }
  };

  $(document).ready(function() {
    var table = $("table");
    var tableId = table.attr('id');
    var freezeRowNum = table.attr('freezeRowNum');
    var freezeColumnNum = table.attr('freezeColumnNum');
    
    if (typeof(freezeRowNum) != 'undefined' || typeof(freezeColumnNum) != 'undefined') {
      freezeTable(table, freezeRowNum || 0, freezeColumnNum || 0, pageWidth(), pageHeight());
      
      var flag = false;
      $(window).resize(function() {
        if (flag) 
          return ;
        
        setTimeout(function() { 
          adjustTableSize(tableId, pageWidth(), pageHeight()); 
          flag = false; 
        }, 100);
        
        flag = true;
      });
    }
  });

Answer 3

表格 <table> 情况比较复杂。因为默认情况下，它会根据内容调整各列宽度。一旦你固定表头，就必须把表头拿出来，独立于表格的其它部分，此时，列可能对不齐。

我之前做过类似的需求，解决方案大致是：

1. 外层容器 <table> position:relative，paddint-top:表头的高度
2. 等待整个 <table> 渲染完成
3. 复制表头 <thead> 拿出来 position:absolute，固定在上面