ホームページ > 記事 > ウェブフロントエンド > スティッキーヘッダーはテーブルヘッダーのスクロール Div 内で使用できますか?
位置: スティッキー;このプロパティは Webkit で注目を集めており、スクロール中に要素を親コンテナ内で固定したままにすることができます。ただし、一部の開発者は、この機能をテーブルを含むスクロール div 要素に拡張する必要があると表明しています。
スクロール div 内のテーブル ヘッダーに固定位置を適用できますか?
答え:
確かに、位置: スティッキー; に使用できるようになりました。要素 2018 年時点!
実装: 次の行を CSS に追加するだけですスタイルシート: 前提条件: テーブル マークアップの例: 追加オプション: ブラウザのサポート: 2018 年 3 月現在、thead 要素のスティッキー配置は最新のブラウザ全体で広くサポートされています。開発者コミュニティの努力のおかげです。 以上がスティッキーヘッダーはテーブルヘッダーのスクロール Div 内で使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。<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>
// body code
</tbody>
</table></code>
<code class="css">thead tr:first-child th { position: sticky; top: 0; }</code>
関連記事
続きを見る