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

一尘不染

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

html

我有一个解决方案，可以使用较小的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提供水平滚动。无论如何，我都不在乎水平滚动，所以如果解决方案不这样做就很好。

阅读 274

2020-05-10

共1个答案

一尘不染

该答案将用作不完全支持的占位符position: sticky，并将随着时间的推移而更新。当前建议不要在生产环境中使用本机实现。

有关当前支持，请参见此：https :
//caniuse.com/#feat=css-sticky

用于 `position: sticky`

另一种答案是使用position: sticky。如W3C所述：

粘性放置的框的位置类似于相对放置的框，但偏移量是使用滚动框参照最近的祖先，如果没有祖先具有滚动框，则参照视口进行计算。

这恰好描述了相对静态头的行为。将其分配给<thead>或第一个<tr>HTML标签将很容易，因为W3C应当支持此标签。但是，Chrome，IE和Edge都无法为这些标签分配粘性位置属性。目前，解决这一问题似乎也没有优先考虑。

对于表格元素似乎起作用的是将sticky属性分配给表格单元。在这种情况下，<th>单元格。

因为表不是尊重您为其分配的静态大小的块元素，所以最好使用 包装器元素 来定义滚动溢出。

编码

div {

  display: inline-block;

  height: 150px;

  overflow: auto

}



table th {

  position: -webkit-sticky;

  position: sticky;

  top: 0;

}





/* == Just general styling, not relevant :) == */



table {

  border-collapse: collapse;

}



th {

  background-color: #1976D2;

  color: #fff;

}



th,

td {

  padding: 1em .5em;

}



table tr {

  color: #212121;

}



table tr:nth-child(odd) {

  background-color: #BBDEFB;

}


<div>

  <table border="0">

    <thead>

      <tr>

        <th>head1</th>

        <th>head2</th>

        <th>head3</th>

        <th>head4</th>

      </tr>

    </thead>

    <tr>

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

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

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

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

    </tr>

    <tr>

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

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

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

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

    </tr>

    <tr>

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

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

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

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

    </tr>

    <tr>

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

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

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

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

    </tr>

    <tr>

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

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

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

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

    </tr>

  </table>

</div>

在此示例中，我使用一个简单的<div>包装器来定义滚动高度（静态高度为）150px。当然可以是任何大小。现在已经定义了滚动框，粘性<th>元素将“与滚动框最靠近的祖先”作为核心。

使用`position: sticky` polyfill

不支持的设备可以使用polyfill，该polyfill通过代码实现行为。粘性位就是一个例子，它的行为类似于浏览器的实现position: sticky。

polyfill的示例： http :
//jsfiddle.net/7UZA4/6957/

2020-05-10