大規模なデータセットを扱う場合、多くの場合、固定ヘッダーとスクロール可能な本体を備えたテーブルを表示する必要があります。 。これにより、ユーザーは列ヘッダーを見失うことなくテーブル内を簡単に移動できるようになります。
残念ながら、この問題に対する最も簡単な解決策は、Bootstrap では機能しないか、スタイルを妨げます。
固定テーブルヘッド - CSS のみ
Chrome、Firefox、Edge の場合は、単に次の CSS を使用して、列ヘッダーをテーブルの上部に固定します:
.tableFixHead { overflow: auto; height: 100px; } .tableFixHead thead th { position: sticky; top: 0; z-index: 1; } /* Just common table stuff. Really. */ table { border-collapse: collapse; width: 100%; } th, td { padding: 8px 16px; } th { background:#eee; }
<div class="tableFixHead"> <table border="1"> <thead> <tr><th>TH 1</th><th>TH 2</th></tr> </thead> <tbody> <tr><td>A1</td><td>A2</td></tr> <tr><td>B1</td><td>B2</td></tr> <tr><td>C1</td><td>C2</td></tr> <tr><td>D1</td><td>D2</td></tr> <tr><td>E1</td><td>E2</td></tr> </tbody> </table> </div>
以上がCSS を使用して固定ヘッダーとスクロール可能な本文のテーブルを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。