Chrome中仅CSS的粘滞表标题

小编典典

Chrome中仅CSS的粘滞表标题

css

我有以下Sass代码段，希望其中<thead>随着表的滚动而浮动。这在Safari中可以正常运行，但在Chrome中不能正常运行Version 58.0.3029.110 (64-bit)。

我知道Chrome一直对Chrome拥有断断续续的sticky支持，但目前是最终的支持吗？这是Chrome的bug，还是我需要其他解决方案？（我更喜欢CSS方法而不是Javascript，因为它性能更高。）

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

阅读 375

2020-05-16

共1个答案

小编典典

位置：粘性不适用于Chrome中的某些表格元素（thead / tr）。您可以将粘性移至需要保持粘性的tds / th。像这样：

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

这也将起作用。

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

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

<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>

2020-05-16