Chrome中仅CSS的粘滞表标题

CSS

十三A

2020-03-19

我有以下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;
  }
}

第2307篇《Chrome中仅CSS的粘滞表标题》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答
西门猿 2020.03.19

https://jsfiddle.net/y9cwnb81/4/

div.table {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr auto;

  grid-template-areas:
    "header header header"
    "content content content";
}

.header {
  grid: 1fr/1fr;
}

.content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-area: content;
  height: 200px;
  overflow-y: scroll;
}

.content div {
  grid: auto-flow 1fr / repeat(auto-fill);
}

<!-- Here is the table code -->

<div class="table">
  <div class="header">Name</div>
  <div class="header">Color</div>
  <div class="header">Description</div>
  <div class="content">
    <div>Apple</div>
    <div>Red</div>
    <div>These are red asd,mas, da,msnd asndm,asndm,asndbansbdansmbdmnasbd.</div>

    <div>Apple</div>
    <div>Red</div>
    <div>These are red asd.</div>

    <div>Apple</div>
    <div>Red</div>
    <div>These are red asd.</div>

    <div>Apple</div>
    <div>Red</div>
    <div>These are red asd.</div>

    <div>Apple</div>
    <div>Red</div>
    <div>These are red asd.</div>

    <div>Apple</div>
    <div>Red</div>
    <div>These are red asd.</div>

    <div>Apple</div>
    <div>Red</div>
    <div>These are red asd.</div>

    <div>Apple</div>
    <div>Red</div>
    <div>These are red asd.</div>

    <div>Apple</div>
    <div>Red</div>
    <div>These are red asd.</div>

    <div>Apple</div>
    <div>Red</div>
    <div>These are red asd.</div>

    <div>Apple</div>
    <div>Red</div>
    <div>These are red asd.</div>
  </div>
</div>

这是一个使用CSS GRID的示例，仅在CSS中具有粘性标头，而无需使用javascript。

Green樱 2020.03.19

您在表头单元格而不是表行上设置粘性位置。 

.td.header {
  position: sticky;
  top:0px;
}

查看这个jsfiddle以获得简单的示例。

凯泡芙Davaid 2020.03.19

位置：粘性不适用于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>
理查德GO 2020.03.19

对于某个仍在寻找解决方案并对被接受的解决方案不满意的人。

1）在元素上使用粘顶类。

2）自己上课

th.sticky-header {
  position: sticky;
  top: 0;
  z-index: 10;
  /*To not have transparent background.
  background-color: white;*/
}
<table class="table">
  <thead>
    <tr>
      <th class="sticky-header">1</th>
      <th class="sticky-header">2</th>
      <th class="sticky-header">3</th>
      <th class="sticky-header">4</th>
    </tr>
  </thead>
  <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>
  </tbody>
</table>

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android