Q&Aこちらの記事を参考に、テーブルの列、行をスクロール時に固定する実装を試みているのですが、固定したい見出しが二行ある場合に上手く動作しません。
以下のような状況になります。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container { overflow: scroll; width: 600px; height: 400px; } .fixed01, .fixed02 { position: sticky; top: 0; left: 0; color: #fff; background: #333; } .fixed01:before, .fixed02:before { content: ""; position: absolute; top: -1px; left: -1px; width: 100%; height: 100%; border: 1px solid #ccc; } .fixed01{ z-index: 2; } .fixed02{ z-index: 1; } table { width: 1000px; } th { width: 300px; height: 40px; } </style> </head> <body> <div class="container"> <table> <thead> <tr> <th rowspan="2" class="p-safety-aftereffect__high fixed01">固定したいtitle</th> <th colspan="3" class="p-safety-aftereffect__row fixed02">固定したいtitle</th> </tr> <tr> <th class="fixed02">固定したいtitle2</th> <th class="fixed02">固定したいtitle2</th> <th class="fixed02">固定したいtitle2</th> </tr> </thead> <tbody> <tr> <th colspan="1" class="fixed02 p-br-n">title</th> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <th class="fixed02">title</th> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <th class="fixed02">title</th> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <th class="fixed02">title</th> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <th class="fixed02">title</th> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <th class="fixed02">title</th> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <th class="fixed02">title</th> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <th class="fixed02">title</th> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <th class="fixed02">title</th> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <th class="fixed02">title</th> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <th class="fixed02">title</th> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <th class="fixed02">title</th> <td>test</td> <td>test</td> <td>test</td> </tr> </tbody> </table> </div> </body> </html>
固定したいtitle2が固定したいtitle1の上にズレてしまう問題を解消したいです。
原因、解決方法等、お分かりの方教えていただけますでしょうか？
よろしくお願いいたします。
【追記】
ソースが少し分かりづらかったので、修正いたしました。
回答1件
0
自己解決
固定したいtitle2の<tr>にtopを指定するスタイルを入れたところ解決しました。
ありがとうございました。
投稿2021/07/01 09:28
総合スコア35
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。