ヘッダ固定のスクロールテーブル
ヘッダ行固定
- 最初の行のみをヘッダとして固定する例です。
th
に対してposition:sticky
とtop:0
を指定しています。- stickyにするとテーブルのボーダーが消えてしまう 問題回避のために
border-collapse:collapse
は使用していません。 - 代わりに
border-spacing:0
を使用しています。 - するとボーダーが太くなってしまうので、セルには右と下のみ、テーブルの外枠に上と左のボーダーを引いています。
- Chrome のバグなのかウィンドウにスクロールバーが表示されると、固定部のボーダーが若干ずれたり、ボーダーが見えなくなってしまうことがあります。
- ソースは下記を参照してください。
A | B | C | D | E |
---|---|---|---|---|
A01 | B01 | C01 | D01 | E01 |
A02 | B02 | C02 | D02 | E02 |
A03 | B03 | C03 | D03 | E03 |
A04 | B04 | C04 | D04 | E04 |
A05 | B05 | C05 | D05 | E05 |
A06 | B06 | C06 | D06 | E06 |
A07 | B07 | C07 | D07 | E07 |
A08 | B08 | C08 | D08 | E08 |
A09 | B09 | C09 | D09 | E09 |
A10 | B10 | C10 | D10 | E10 |
A11 | B11 | C11 | D11 | E11 |
A12 | B12 | C12 | D12 | E12 |
A13 | B13 | C13 | D13 | E13 |
A14 | B14 | C14 | D14 | E14 |
A15 | B15 | C15 | D15 | E15 |
A16 | B16 | C16 | D16 | E16 |
Copyright (C) 2025 杜甫々
初版: 2025年3月30日、最終更新:2025年3月30日
https://www.tohoho-web.com/how2/header-fixed-table-row.html