web-dev-qa-db-ja.com

ChromeのCSSのみのスティッキテーブルヘッダー

次のSassスニペットがあり、テーブルがスクロールするときに<thead>をフロートさせます。これはSafariで正常に機能しますが、Chrome Version 58.0.3029.110 (64-bit)では正常に機能しません。

Chromeがstickyを再びサポートし、現在サポートしていることを知っていますが、それは最終的なものですか？これはChromeバグですか、別の解決策が必要ですか？ （私はJavascriptよりもCSSの方がパフォーマンスが良いので好みです。）

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

位置：スティッキは、Chromeの一部のテーブル要素（thead/tr）では機能しません。スティッキーにする必要があるtrのtds/thsにスティッキーを移動できます。このような：

.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>
60
Kirill Matrosov

まだ解決策を探していて、受け入れられているものに満足していない人のために。

1）th要素でsticky-topクラスを使用します。

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

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は不要な例です。

3
Danilo Castro

テーブル行ではなくヘッダーテーブルセルのスティッキー位置を設定します。

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

これを確認してください jsfiddle 簡単な例。

0
CarCar