Chrome中仅CSS的粘滞表标题 [英] CSS-Only Sticky Table Headers In Chrome

问题描述

我有以下Sass代码段，我希望其中<thead>在表滚动时浮动.在Safari中可以正常使用，但在Chrome Version 58.0.3029.110 (64-bit)中则不能.

I have the following Sass snippet in which I want the <thead> to float as the table scrolls. This works properly in Safari, but not in Chrome Version 58.0.3029.110 (64-bit).

我知道Chrome对sticky拥有断断续续的支持，并且目前支持它，但这是最终的吗?这是Chrome的bug，还是我需要其他解决方案? (我更喜欢CSS方法而不是Javascript，因为它性能更高.)

I know that Chrome has had on-again-off-again support for sticky, and currently supports it, but is it final? Is this a Chrome bug or do I need a different solution? (I prefer the CSS approach rather than Javascript because it's more performant.)

.table {
  thead {
    background: white;
    position: sticky;
    top: 0;
    z-index: 10;
  }
}

推荐答案

位置:粘性不适用于Chrome中的某些表元素(thead/tr).您可以将粘性移至需要保持粘性的tds/th.像这样:

position: sticky doesn't work with some table elements (thead/tr) in Chrome. You can move sticky to tds/ths of tr you need to be sticky. Like this:

.table {
  thead tr:nth-child(1) th{
    background: white;
    position: sticky;
    top: 0;
    z-index: 10;
  }
}

这也可以.

.table {
    position: sticky;
    top: 0;
    z-index: 10;
}

您可以将标题移动到单独的布局.例如:

You can move header to separate layout. For example:

<table class="table">
    <thead>
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
    </tr>
    </thead>
</table>
<table>
    <tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

这篇关于Chrome中仅CSS的粘滞表标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！