Q&A
実現したいこと
tableの1行目と1列目をスクロールさせても固定させたい
発生している問題・エラーメッセージ
position: sticky;を使ってtableの1行目と1列目をスクロールさせても固定させたい。
しかし、1列目は固定できたが、1行目は固定できない。
該当のソースコード
html
1 2<div class="table-responsive"> 3 <table class="table text-nowrap"> 4 <thead> 5 <tr> 6 <th> </th> 7 <td>A</td> 8 <td>B</td> 9 <td>C</td> 10 <td>D</td> 11 <td>E</td> 12 <td>F</td> 13 <td>G</td> 14 </tr> 15 </thead> 16 <tbody> 17 <tr> 18 <th>1</th> 19 <td>100</td> 20 <td>-50</td> 21 <td>70</td> 22 <td>100</td> 23 <td>60</td> 24 <td>-100</td> 25 <td>-90</td> 26 </tr> 27 <tr> 28 <th>1</th> 29 <td>100</td> 30 <td>-50</td> 31 <td>70</td> 32 <td>100</td> 33 <td>60</td> 34 <td>-100</td> 35 <td>-90</td> 36 </tr> 37 <tr> 38 <th>1</th> 39 <td>100</td> 40 <td>-50</td> 41 <td>70</td> 42 <td>100</td> 43 <td>60</td> 44 <td>-100</td> 45 <td>-90</td> 46 </tr> 47 <tr> 48 <th>1</th> 49 <td>100</td> 50 <td>-50</td> 51 <td>70</td> 52 <td>100</td> 53 <td>60</td> 54 <td>-100</td> 55 <td>-90</td> 56 </tr> 57 <tr> 58 <th>1</th> 59 <td>100</td> 60 <td>-50</td> 61 <td>70</td> 62 <td>100</td> 63 <td>60</td> 64 <td>-100</td> 65 <td>-90</td> 66 </tr> 67 <tr> 68 <th>1</th> 69 <td>100</td> 70 <td>-50</td> 71 <td>70</td> 72 <td>100</td> 73 <td>60</td> 74 <td>-100</td> 75 <td>-90</td> 76 </tr> 77 <tr> 78 <th>1</th> 79 <td>100</td> 80 <td>-50</td> 81 <td>70</td> 82 <td>100</td> 83 <td>60</td> 84 <td>-100</td> 85 <td>-90</td> 86 </tr> 87 <tr> 88 <th>1</th> 89 <td>100</td> 90 <td>-50</td> 91 <td>70</td> 92 <td>100</td> 93 <td>60</td> 94 <td>-100</td> 95 <td>-90</td> 96 </tr> 97 <tr> 98 <th>1</th> 99 <td>100</td> 100 <td>-50</td> 101 <td>70</td> 102 <td>100</td> 103 <td>60</td> 104 <td>-100</td> 105 <td>-90</td> 106 </tr> 107 <tr> 108 <th>1</th> 109 <td>100</td> 110 <td>-50</td> 111 <td>70</td> 112 <td>100</td> 113 <td>60</td> 114 <td>-100</td> 115 <td>-90</td> 116 </tr> 117 <tr> 118 <th>1</th> 119 <td>100</td> 120 <td>-50</td> 121 <td>70</td> 122 <td>100</td> 123 <td>60</td> 124 <td>-100</td> 125 <td>-90</td> 126 </tr> 127 <tr> 128 <th>1</th> 129 <td>100</td> 130 <td>-50</td> 131 <td>70</td> 132 <td>100</td> 133 <td>60</td> 134 <td>-100</td> 135 <td>-90</td> 136 </tr> 137 <tr> 138 <th>1</th> 139 <td>100</td> 140 <td>-50</td> 141 <td>70</td> 142 <td>100</td> 143 <td>60</td> 144 <td>-100</td> 145 <td>-90</td> 146 </tr> 147 <tr> 148 <th>1</th> 149 <td>100</td> 150 <td>-50</td> 151 <td>70</td> 152 <td>100</td> 153 <td>60</td> 154 <td>-100</td> 155 <td>-90</td> 156 </tr> 157 <tr> 158 <th>1</th> 159 <td>100</td> 160 <td>-50</td> 161 <td>70</td> 162 <td>100</td> 163 <td>60</td> 164 <td>-100</td> 165 <td>-90</td> 166 </tr> 167 <tr> 168 <th>1</th> 169 <td>100</td> 170 <td>-50</td> 171 <td>70</td> 172 <td>100</td> 173 <td>60</td> 174 <td>-100</td> 175 <td>-90</td> 176 </tr> 177 <tr> 178 <th>1</th> 179 <td>100</td> 180 <td>-50</td> 181 <td>70</td> 182 <td>100</td> 183 <td>60</td> 184 <td>-100</td> 185 <td>-90</td> 186 </tr> 187 <tr> 188 <th>1</th> 189 <td>100</td> 190 <td>-50</td> 191 <td>70</td> 192 <td>100</td> 193 <td>60</td> 194 <td>-100</td> 195 <td>-90</td> 196 </tr> 197 <tr> 198 <th>1</th> 199 <td>100</td> 200 <td>-50</td> 201 <td>70</td> 202 <td>100</td> 203 <td>60</td> 204 <td>-100</td> 205 <td>-90</td> 206 </tr> 207 <tr> 208 <th>1</th> 209 <td>100</td> 210 <td>-50</td> 211 <td>70</td> 212 <td>100</td> 213 <td>60</td> 214 <td>-100</td> 215 <td>-90</td> 216 </tr> 217 </tbody> 218 </table> 219</div>
css
1.table { 2 text-align: center; 3} 4 5.table thead th, 6.table thead td { 7 position: -webkit-sticky; 8 position: sticky; 9 top: 0; 10 z-index: 1; 11 background: #eee; 12} 13 14.table tbody th { 15 vertical-align: middle; 16 position: -webkit-sticky; 17 position: sticky; 18 left: 0; 19 z-index: 2; 20 min-width: 50px; 21 background: #eee; 22} 23 24.table td { 25 padding: 5px 10px; 26 min-width: 110px; 27}
試したこと
1行目を固定させるために以下のコードを書きましたが、固定できませんでした。
css
1.table thead th, 2.table thead td { 3 position: -webkit-sticky; 4 position: sticky; 5 top: 0; 6 z-index: 1; 7 background: #eee; 8}
補足情報（FW/ツールのバージョンなど）
今回はbootstrapを使用しており、以下をheadタグ内で読み込ませています。
html
1 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
どうぞよろしくお願いいたします。
回答1件
0
ベストアンサー
<div class="table-responsive">のBootstrapクラスが設定されているのが原因ですので、このクラスを削除すれば固定されるようになります。
投稿2023/01/22 01:29
総合スコア34352
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2023/01/22 02:39 編集
2023/01/22 02:47
2023/01/22 05:42
2023/01/22 11:50
2023/01/22 13:53