Q&A
「ヘッダーが少し動いてしまいます」とのことですが、これはスクロールした時にヘッダーが動く、ということですか？
前提・実現したいこと
tableでヘッダーを固定させたいと思っています。
見よう見まねで実装することは出来ました。
発生している問題
スクロールさせた時ヘッダーは画面内に納まるのですが、ヘッダーが少し動いてしまいます。
これをヘッダーが動かないようにするにはどのようにすればよいのでしょうか?
ただ、もし最初の位置で固定されると、スクロールされたデータはヘッダーの上に出てきてしまうのではないでしょうか?
該当のソースコード
test.html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <link rel="stylesheet" href="test.css" > 5</head> 6 7<body> 8 <table class="table table-hoge"> 9 <thead> 10 <tr> 11 <th>#</th> 12 <th>ID</th> 13 <th>あああ</th> 14 <th>いいいい</th> 15 <th>ううううう</th> 16 <th>ええええええ</th> 17 <th>おおおおおおお</th> 18 </tr> 19 </thead> 20 <tbody> 21 <tr> 22 <td>○</td> 23 <td>1</td> 24 <td>HogeHoge</td> 25 <td>FooFoo</td> 26 <td>BarBar</td> 27 <td>BazBaz</td> 28 <td>TotoToto</td> 29 </tr> 30 </tbody> 31 </table> 32</body> 33</html>
test.css
1 2.table-hoge { 3} 4 5.table-hoge th { 6 white-space: nowrap; 7 position: sticky; 8 left: 0; 9 top: 0; 10 z-index: 1; 11 color: white; 12} 13 14.table-hoge td { 15 white-space: nowrap; 16} 17 18.table-hoge th:after { 19 content: ""; 20 position: absolute; 21 left: 0; 22 top: 0; 23 width: 100%; 24 height: 100%; 25 z-index: -1; 26 background-color: darkblue; 27}
補足情報（FW/ツールのバージョンなど）
Windows10
Chrome 98.0.4758.102
回答1件
0
ベストアンサー
こういうことですか？
css
1.table-hoge { 2 border-collapse: collapse; 3} 4 5* { 6 margin: 0; 7}
投稿2022/02/21 01:44
総合スコア37411
早々のご返答ありがとうございます。
挙動としては問題ありません。
もしよろしければ margin を 0 でない場合はどのようにしたらよいのかご存じであれば教えていただけないでしょうか。
その場合は、top の値で調整するか、そのマージンの内側をスクロールさせる必要があるかと思います。
なるほど。ありがとうございます。
いろいろ試してみたいと思います。
あなたの回答
tips
プレビュー
