Q&A
前提・実現したいこと
Bootstrap4で作成したテーブルのtheadを上部固定とtbodyのthを左側に固定したいと思い下記リンクの方法を試したのですがtheadが1行しか固定されず理想の動きになりません。
何か方法がありましたらご教授いただけますと幸いです。
▼「行（縦軸）と列（縦軸）どちらも固定する」をやってみました
https://since-inc.jp/blog/8675
該当のソースコード
html
1<article class="container"> 2 <section class="row"> 3 <div class="col-12"> 4 <div class="col-md-12 bl_statement mx-auto"> 5 <table> 6 <thead> 7 <tr> 8 <th class="fixed01" rowspan="2">ダミータイトル</th> 9 <th class="fixed02" colspan="4">ダミータイトル</th> 10 <th class="fixed02" colspan="1">ダミータイトル</th> 11 <th class="fixed02" colspan="8">ダミータイトル</th> 12 </tr> 13 <tr> 14 <th class="fixed02">ダミータイトル</th> 15 <th class="fixed02">ダミータイトル</th> 16 <th class="fixed02">ダミータイトル</th> 17 <th class="fixed02">ダミータイトル</th> 18 <th class="fixed02">ダミータイトル</th> 19 <th class="fixed02">ダミータイトル</th> 20 <th class="fixed02">ダミータイトル</th> 21 <th class="fixed02">ダミータイトル</th> 22 <th class="fixed02">ダミータイトル</th> 23 <th class="fixed02">ダミータイトル</th> 24 <th class="fixed02">ダミータイトル</th> 25 <th class="fixed02">ダミータイトル</th> 26 <th class="fixed02">ダミータイトル</th> 27 </tr> 28 </thead> 29 <tbody> 30 <tr> 31 <th class="fixed02" class="el_bg_gray">ダミーテキスト</th> 32 <td>000</td> 33 <td>000</td> 34 <td>000</td> 35 <td>000</td> 36 <td>000</td> 37 <td>000</td> 38 <td>000</td> 39 <td>000</td> 40 <td>000</td> 41 <td>000</td> 42 <td>000</td> 43 <td>000</td> 44 <td>000</td> 45 </tr> 46 <tr> 47 <th class="fixed02" class="el_bg_gray">ダミーテキスト</th> 48 <td>000</td> 49 <td>000</td> 50 <td>000</td> 51 <td>000</td> 52 <td>000</td> 53 <td>000</td> 54 <td>000</td> 55 <td>000</td> 56 <td>000</td> 57 <td>000</td> 58 <td>000</td> 59 <td>000</td> 60 <td>000</td> 61 </tr> 62 <tr> 63 <th class="fixed02" class="el_bg_gray">ダミーテキスト</th> 64 <td>000</td> 65 <td>000</td> 66 <td>000</td> 67 <td>000</td> 68 <td>000</td> 69 <td>000</td> 70 <td>000</td> 71 <td>000</td> 72 <td>000</td> 73 <td>000</td> 74 <td>000</td> 75 <td>000</td> 76 <td>000</td> 77 </tr> 78 </tbody> 79 </table> 80 </div> 81 </div> 82 </section> 83</article>
css
1 2.fixed01, 3.fixed02{ 4 position: sticky; 5 top: 0; 6 left: 0; 7 color: #fff; 8 background: #333; 9 &:before{ 10 content: ""; 11 position: absolute; 12 top: -1px; 13 left: -1px; 14 width: 100%; 15 height: 100%; 16 border: 1px solid #ccc; 17 } 18} 19.fixed01{ 20 z-index: 2; 21} 22.fixed02{ 23 z-index: 1; 24}
回答1件
0
ベストアンサー
質問者様の内容通り再現しましたが...
基本は質問者様の参考になされた内容ほぼそのままにしています。
HTML上の指定がClass名を変更した為一部変わっています。
css
1table{ 2 width: 1800px; 3} 4th,td{ 5 width: 300px; 6 height: 100px; 7 vertical-align: middle; 8 padding: 0 15px; 9 border: 1px solid #ccc; 10} 11.fixed01{ 12 position: sticky; 13 top: 0; 14 color: #fff; 15 background: #333; 16 z-index: 10; /* 重なり合い調整の為 追加 */ 17} 18 19.fixed01:before{ 20 content: ""; 21 position: absolute; 22 top: -1px; 23 left: -1px; 24 width: 100%; 25 height: 100%; 26 border: 1px solid #ccc; 27} 28.fixed02{ 29 position: sticky; 30 top: 104px; 31 color: #fff; 32 background: #333; 33 z-index: 10; /* 重なり合い調整の為 追加 */ 34} 35.fixed02:before{ 36 content: ""; 37 position: absolute; 38 top: -1px; 39 left: -1px; 40 width: 100%; 41 height: 100%; 42 border: 1px solid #ccc; 43} 44.fixed03{ 45 position: sticky; 46 left: 0; 47 color: #fff; 48 background: #333; 49 z-index: 1; /* 重なり合い調整の為 追加 */ 50} 51.fixed03:before{ 52 content: ""; 53 position: absolute; 54 top: -1px; 55 left: -1px; 56 width: 100%; 57 height: 100%; 58 border: 1px solid #ccc; 59}
HTML
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title></title> 6</head> 7 8<body> 9<article class="container"> 10 <section class="row"> 11 <div class="col-12"> 12 <div class="col-md-12 bl_statement mx-auto"> 13 <table> 14 <thead> 15 <tr> 16 <th class="fixed01" rowspan="2">ダミータイトル</th> 17 <th class="fixed01" colspan="4">ダミータイトル</th> 18 <th class="fixed01" colspan="1">ダミータイトル</th> 19 <th class="fixed01" colspan="8">ダミータイトル</th> 20 </tr> 21 <tr> 22 <th class="fixed02">ダミータイトル</th> 23 <th class="fixed02">ダミータイトル</th> 24 <th class="fixed02">ダミータイトル</th> 25 <th class="fixed02">ダミータイトル</th> 26 <th class="fixed02">ダミータイトル</th> 27 <th class="fixed02">ダミータイトル</th> 28 <th class="fixed02">ダミータイトル</th> 29 <th class="fixed02">ダミータイトル</th> 30 <th class="fixed02">ダミータイトル</th> 31 <th class="fixed02">ダミータイトル</th> 32 <th class="fixed02">ダミータイトル</th> 33 <th class="fixed02">ダミータイトル</th> 34 <th class="fixed02">ダミータイトル</th> 35 </tr> 36 </thead> 37 <tbody> 38 <tr> 39 <th class="fixed03">ダミーテキスト</th> 40 <td>000</td> 41 <td>000</td> 42 <td>000</td> 43 <td>000</td> 44 <td>000</td> 45 <td>000</td> 46 <td>000</td> 47 <td>000</td> 48 <td>000</td> 49 <td>000</td> 50 <td>000</td> 51 <td>000</td> 52 <td>000</td> 53 </tr> 54 <tr> 55 <th class="fixed03">ダミーテキスト</th> 56 <td>000</td> 57 <td>000</td> 58 <td>000</td> 59 <td>000</td> 60 <td>000</td> 61 <td>000</td> 62 <td>000</td> 63 <td>000</td> 64 <td>000</td> 65 <td>000</td> 66 <td>000</td> 67 <td>000</td> 68 <td>000</td> 69 </tr> 70 <tr> 71 <th class="fixed03">ダミーテキスト</th> 72 <td>000</td> 73 <td>000</td> 74 <td>000</td> 75 <td>000</td> 76 <td>000</td> 77 <td>000</td> 78 <td>000</td> 79 <td>000</td> 80 <td>000</td> 81 <td>000</td> 82 <td>000</td> 83 <td>000</td> 84 <td>000</td> 85 </tr> 86 </tbody> 87 </table> 88 </div> 89 </div> 90 </section> 91</article> 92</body> 93</html> 94 95
投稿2020/10/12 09:45
総合スコア2506
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/10/12 10:35
2020/10/12 10:44
2020/10/12 11:12
2020/10/12 11:19
2020/10/12 11:22