具有固定标题的纯CSS滚动表

Question

我有一个解决方案，可以使用次要的jQuery和CSS创建带有固定页眉/页脚的可滚动表-但我正在寻找一种使之成为跨浏览器兼容的仅CSS解决方案的方法。需要明确的是，我所寻求要做的就是使用只有一个table标签（和它是有效的子标签，colgroup，col，thead，tbody，tfoot，tr，th，td），而是采用了一套将符合下列条件的CSS规则：必须保持页眉/页脚/内容行之间的列对齐当内容垂直滚动时，必须允许页眉/页脚保持固定不得使用任何jQuery或其他JavaScript来提供功能必须仅使用上面提供的标签此代码示例：http : //jsfiddle.net/TroyAlford/SNKfd/显示了我当前的方法。大部分JS只是用随机值填充表，但最后一部分是驱动左右滚动性的因素。$tbody.bind('scroll', function(ev) {    var $css = { 'left': -ev.target.scrollLeft };    $thead.css($css);    $tfoot.css($css);});注意：提供的示例无法在IE中正确呈现，并且需要jQuery提供水平滚动。无论如何，我都不在乎水平滚动，所以如果解决方案不这样做就很好。

Answer 1

惊讶的是尚未发布使用flexbox的解决方案。

这是我的解决方案的使用，display: flex以及:after（感谢Luggage）的基本用法来保持对齐，即使滚动条tbody稍微填充一下。这已在Chrome 45，Firefox 39和MS Edge中得到验证。可以使用带前缀的属性对其进行修改，以在IE11中工作，并进一步在IE10中使用CSS hack和2012 flexbox语法。

注意表的宽度可以修改；这甚至可以在100%宽度上工作。

唯一的警告是所有表单元格必须具有相同的宽度。下面是一个明显的示例，但是当单元格内容变化时（表单元格都具有相同的宽度和自动换行，这迫使flexbox保持相同的宽度而不管内容如何）都可以正常工作。这是单元格内容不同的示例。

只需将.scroll类应用于要滚动的表，并确保其具有thead：

.scroll {

  border: 0;

  border-collapse: collapse;

}

.scroll tr {

  display: flex;

}

.scroll td {

  padding: 3px;

  flex: 1 auto;

  border: 1px solid #aaa;

  width: 1px;

  word-wrap: break;

}

.scroll thead tr:after {

  content: '';

  overflow-y: scroll;

  visibility: hidden;

  height: 0;

}

.scroll thead th {

  flex: 1 auto;

  display: block;

  border: 1px solid #000;

}

.scroll tbody {

  display: block;

  width: 100%;

  overflow-y: auto;

  height: 200px;

}

<table class="scroll" width="400px">

  <thead>

    <tr>

      <th>Header</th>

      <th>Header</th>

      <th>Header</th>

      <th>Header</th>

      <th>Header</th>

      <th>Header</th>

    </tr>

  </thead>

  <tr>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

  </tr>

  <tr>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

  </tr>

  <tr>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

  </tr>

  <tr>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

  </tr>

  <tr>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

  </tr>

  <tr>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

  </tr>

  <tr>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

  </tr>

  <tr>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

  </tr>

  <tr>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

  </tr>

  <tr>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

  </tr>

  <tr>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

  </tr>

  <tr>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

  </tr>

  <tr>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

  </tr>

  <tr>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

  </tr>

  <tr>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

  </tr>

  <tr>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

  </tr>

  <tr>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

  </tr>

  <tr>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

    <td>Data</td>

  </tr>

</table>

Answer 2

据我所知，没有标准的方法可以仅使用CSS来实现这一目标，尽管我认为应该这样做。Mozilla浏览器过去一直支持带有滚动体的固定标头，但最近几年已将其删除。

经过一番研究，包括找到这篇文章，一个朋友刚刚为我开发了这个解决方案。它使用Javascript，但不使用罐头库，并且HTML标记的唯一要求是表具有ID名称。然后，在window.onload处，为每个提供ID，高度和宽度的表调用一个Javascript函数。如果在浏览器中禁用了Javascript，则会根据其原始标记显示整个表格。如果启用了Javascript，则表格将适合指定的高度和宽度，并且tbody会滚动；如果thead和tfoot存在，则会固定在顶部和底部。