Q&A
前提・実現したいこと
サイドバー付きのWebページを作成しています。
デスクトップでの利用を前提としています。
表示されるものはトップメニュー、サイドバー、テーブルがあり、ブラウザのウィンドウ幅が小さくなるとサイドバーが閉じるようになっています。
テーブルは列、行ともにそこそこ数がありフルHDのモニターでは画面内に納まりません。
表示方法としてはヘッダーと1列目が固定したほうが見やすいので、見様見真似ですがなんとか実現できました。
発生している問題・エラーメッセージ
ウィンドウ幅を小さくすると、サイドバーが隠れてテーブルも左端に移動するようにしましたが、ここで固定していた1列目が動いてしまうようになりました。
該当のソースコード
抜粋したものになりますが挙動は同じです。
test.html
test.html
1<!DOCTYPE html> 2<html> 3 4<head> 5 <title>Test</title> 6 <link href="test.css" rel="stylesheet"> 7</head> 8 9<body> 10<div class="content-page"> 11<table> 12 <thead> 13 <tr> 14 <th class="sticky-ex" >AAAAA</th> 15 <th class="sticky-ex" >BBBBB</th> 16 <th class="sticky-ex" >CCCCC</th> 17 <th class="sticky-ex" >DDDDD</th> 18 <th class="sticky-ex" >EEEEE</th> 19 <th class="sticky-ex" >FFFFF</th> 20 <th class="sticky-ex" >GGGGG</th> 21 <th class="sticky-ex" >HHHHH</th> 22 <th class="sticky-ex" >IIIII</th> 23 <th class="sticky-ex" >JJJJJ</th> 24 <th class="sticky-ex" >KKKKK</th> 25 </tr> 26 </thead> 27 <tbody> 28 <tr> 29 <td class="sticky-ex" >AAAAAA01234</td> 30 <td>BBBBBB01234</td> 31 <td>CCCCCC01234</td> 32 <td>DDDDDD01234</td> 33 <td>EEEEEE01234</td> 34 <td>FFFFFF01234</td> 35 <td>GGGGGG01234</td> 36 <td>HHHHHH01234</td> 37 <td>IIIIII01234</td> 38 <td>JJJJJJ01234</td> 39 <td>KKKKKK01234</td> 40 </tr> 41 </tbody> 42</table> 43</div> 44</body> 45</html>
test.css
test.css
1 2th, td { 3 white-space: nowrap; 4} 5 6.content-page { 7 width: calc(100% - 250px); 8 transition: none; 9 position: absolute; 10 top: 50px; 11 right: 0; 12} 13 14.sticky-ex { 15 position: sticky; 16 top: 50px; /* content-page より */ 17 left: 250px; /* content-page より */ 18 z-index: 1; 19} 20 21.sticky-ex.fixed { 22 z-index: 2; 23} 24 25@media (max-width: 576px) { 26 .content-page { 27 width: 100%; 28 } 29 30 .sticky-ex { 31 left: -250px; 32 } 33}
期待した動作
ウィンドウ幅を小さくし、サイドバーが隠れテーブルが左端に移動したときも、テーブルをスクロールしても1列目を固定したいのですが、どのようにすればよろしいのでしょうか。
補足情報（FW/ツールのバージョンなど）
環境:Windows10
ブラウザ:Chrome
回答1件
0
ベストアンサー
これでどうでしょうか。
HTML
1<div class="content-page"> 2<table> 3 <thead> 4 <tr> 5 <th class="sticky-ex" >AAAAA</th> 6 <th>BBBBB</th> 7 <th>CCCCC</th> 8 <th>DDDDD</th> 9 <th>EEEEE</th> 10 <th>FFFFF</th> 11 <th>GGGGG</th> 12 <th>HHHHH</th> 13 <th>IIIII</th> 14 <th>JJJJJ</th> 15 <th>KKKKK</th> 16 </tr> 17 </thead> 18 <tbody> 19 <tr> 20 <td class="sticky-ex" >AAAAAA01234</td> 21 <td>BBBBBB01234</td> 22 <td>CCCCCC01234</td> 23 <td>DDDDDD01234</td> 24 <td>EEEEEE01234</td> 25 <td>FFFFFF01234</td> 26 <td>GGGGGG01234</td> 27 <td>HHHHHH01234</td> 28 <td>IIIIII01234</td> 29 <td>JJJJJJ01234</td> 30 <td>KKKKKK01234</td> 31 </tr> 32 </tbody> 33</table> 34</div>
CSS
1@media (max-width: 576px) { 2 .content-page { 3 width: 100%; 4 } 5 6 .sticky-ex { 7 left: 0; 8 } 9}
投稿2022/01/05 07:52
総合スコア128
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/01/05 08:14