表の外の表見出しに「position: Sticky」を使用できますか?

表の固定見出し

親要素内で要素を固定にする機能が Webkit に導入されました。 JavaScript と絶対配置を使用してテーブル自体内のテーブル見出しのスティッキー動作を実現できますが、スティッキー配置がより簡単な解決策を提供できるかどうかを検討する価値があります。 table?

はい、スティッキー配置を使用して、テーブルの見出しをテーブルの外側にスティッキーにすることができます。次の CSS を追加すると、この効果を実現できます。

表の見出しに固定位置を使用するには、表に各列見出しの th 要素を含む thead 要素が必要です。以下に例を示します。

<code class="css">thead th {
  position: sticky;
  top: 0;
}</code>

制限事項と互換性

<code class="html"><table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
    </tr>
  </thead>
  <tbody>
    <!-- Table body content -->
  </tbody>
</table></code>

最新のブラウザでは、固定配置は表の見出しに対して機能しますが、互換性はデバイスによって異なる場合があることに注意することが重要です。そしてブラウザ。 caniuse.com によると、2018 年 3 月の時点で、スティッキー ポジショニングのサポートは最新のブラウザー全体で概ね良好です: https://caniuse.com/#feat=css-sticky

以上が表の外の表見出しに「position: Sticky」を使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。