この記事では、HTML Table ヘッダー固定の実装を紹介し、皆さんと共有します。詳細は次のとおりです。
<div class=wrapbox> <div class=table-head> <table> <thead> <th width=10%>契約番号</th> <th width=30%>契約顧客</th> <th width= 20%>顧客のリリース</th> <th width=10%>契約ステータス</th> <th width=30%>選択した条件のサイクル割り当てのリリース</th> </thead> </table> </ div > <div class=table-body> <テーブル> <tbody id=tbody> </tbody> </table> </div></div>
CSSを見てみる
*{ パディング:0; マージン:0; th{ ボーダー:1px 行の高さ: 5vh; フォントサイズ: 16px; テーブルの縮小: 幅: 100% ; } td { パディング:5px; ボーダー:1px フォントサイズ: 14px; .table-head{padding-right:17px;background-color:rgb(207, 231, 179);color:#000;height:5vh;} .table-body{width:100%; height:94vh;} -y:scroll;} .table-head テーブル,.table-body テーブル{幅:100%;} .table-body テーブルtr:nth-child(2n+1){背景色:#f2f2f2;} .table-body テーブル tr:hover { 背景色:rgb(240, 249, 228); }クリックして効果を確認してください
実は、重要なポイントは、
1. Colgroup タグを使用して、上部テーブルと下部テーブルの列幅を定義し、一貫性を保ちます。
2. 上部の div .table-head には、padding-right: 17px というスタイルが追加されます。この幅は、下部の div .table-body のスクロール バーとの一貫性を確保するためのものです。 -body はスタイルのオーバーフローを追加します- y:scroll;
上記2点を押さえれば、固定ヘッダー付きの表も作成でき、同時に上下の列がずれてしまう問題も発生しません。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。