52

ご存じかもしれませんがposition: sticky;、Webkit ( demo ) に組み込まれています。これまでのところ、これは親要素内でのみ機能することがわかります。しかし、テーブルのあるスクロール div でこれを使用できるかどうか知りたいです。

divしたがって、ではなく、のスクロール イベントを「リッスン」する必要がありtableます。

JavaScript と絶対配置でこれを実行できることはわかっていますが、これsticky-positioningがサポートされるかどうか疑問に思っていました。

4

5 に答える 5

11

position: sticky テーブルは仕様の一部ではないため、(display属性が で始まる限り)テーブル要素では機能しません:table-

テーブル、「フローティング」ボックス、ルビ注釈、グリッド レイアウト、列、および通常の「フロー」コンテンツの基本的な処理など、他の種類のレイアウトについては、他のモジュールで説明されています。

編集: https://caniuse.com/#feat=css-stickyによると、2019 年 7 月現在、Firefox はこの機能をサポートしており、Chrome は少なくとも<th>タグをサポートしています。

于 2015-05-03T17:37:45.387 に答える
2

結局のところ、ウィンドウでposition: stickyのみ機能し、スクロール div では機能しません。

テーブル ヘッダーを持つ非常に長いテーブルを使用してテスト ケースを作成しました。

h1 {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0;
}

div.testTable {
  height: 200px;
  overflow: auto;
}

table.stickyHead thead {
  position: -webkit-sticky;
  top: 0px;
  background: grey;
}

table.stickyHead td,
table.stickyHead th {
  padding: 2px 3px;
}
<h1>Position sticky</h1>
<div class="testTable">
  <table class="stickyHead">
    <thead>
      <tr>
        <th>column 1</th>
        <th>column 2</th>
        <th>column 3</th>
        <th>column 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>
      <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>
      <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>
      <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>
      <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>
      <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>
</div>

ご覧のとおり、ラッパーからオーバーフローを削除してウィンドウの高さを低くすると、テーブルの頭がウィンドウの上部にくっついてしまいます。divご指定いただいてもラッピングは承っておりません。div position: relative

于 2012-09-17T09:27:06.093 に答える