Q&A
解決したいこと
見出しと内容の位置のズレを解消し、
合わせたいです。
HTMLCSS
1<!DOCTYPE html> 2<html> 3<meta charset="utf-8"> 4 5<head> 6 <title>テスト</title> 7</head> 8 9<body> 10 <style> 11 table.kotei_table { 12 border-collapse: collapse; 13 border-spacing: 0; 14 padding: 0; 15 margin: 0; 16 } 17 18 .kotei_table th, 19 .kotei_table td { 20 white-space: nowrap; 21 padding: 5px; 22 font-weight: normal; 23 } 24 25 .kotei_table thead th { 26 position: -webkit-sticky; 27 position: sticky; 28 top: 0; 29 z-index: 1; 30 background: #ccc; 31 } 32 33 .kotei_table thead th:first-child { 34 z-index: 2; 35 } 36 37 .kotei_table th:first-child { 38 position: -webkit-sticky; 39 position: sticky; 40 left: 0; 41 } 42 43 .kotei_table tbody th { 44 background-color: #eee; 45 } 46 47 .kotei_table thead tr:nth-child(1) th { 48 top: 0; 49 } 50 51 .kotei_table thead tr:nth-child(2) th { 52 top: 34px; 53 } 54 .kotei_table thead tr:nth-child(3) th { 55 top: 68px; 56 } 57 58 </style> 59 60 61<table class="kotei_table"> 62 <thead> 63 <tr> 64 <th colspan="3">タイトル行</th> 65 <th></th> 66 <th>見出し5</th> 67 <th>見出し6</th> 68 <th>見出し7</th> 69 <th>見出し8</th> 70 <th>見出し9</th> 71 <th>見出し10</th> 72 <th>見出し11</th> 73 <th>見出し12</th> 74 </tr> 75 <tr> 76 <th>見出し1</th> 77 <th>見出し2</th> 78 <th>見出し3</th> 79 <th>見出し4</th> 80 <th>見出し5</th> 81 <th>見出し6</th> 82 <th>見出し7</th> 83 <th>2020.00.00</th> 84 <th>見出し9</th> 85 <th>見出し10</th> 86 <th>見出し11</th> 87 <th>見出し12</th> 88 </tr> 89 <tr> 90 91 <th>見出し1</th> 92 <th>見出し2</th> 93 <th>見出し3</th> 94 <th>見出し4</th> 95 <th>見出し5</th> 96 <th>見出し6</th> 97 <th>見出し7</th> 98 <th>見出し8</th> 99 <th>見出し9</th> 100 <th>見出し10</th> 101 <th>見出し11</th> 102 <th>見出し12</th> 103 104 </tr> 105 </thead> 106 <tbody> 107 <tr> 108 <th>00001</th> 109 <td>テスト</td> 110 <td>テスト</td> 111 <td>テスト</td> 112 <td>テストテストテストテストテストテストテストテストテスト</td> 113 <td>テスト</td> 114 <td>テスト</td> 115 <td>テスト</td> 116 <td>テストテストテストテストテストテストテストテストテスト</td> 117 <td>テスト</td> 118 <td>テスト</td> 119 <td>テスト</td> 120 </tr> 121 <tr> 122 <th>00002</th> 123 <td>テスト</td> 124 <td>テスト</td> 125 <td>テスト</td> 126 <td>テストテストテストテストテストテストテスト</td> 127 <td>テスト</td> 128 <td>テスト</td> 129 <td>テスト</td> 130 <td>テストテストテストテストテストテストテストテストテスト</td> 131 <td>テスト</td> 132 <td>テスト</td> 133 <td>テスト</td> 134 </tr> 135 <tr> 136 <th>00003</th> 137 <td>テスト</td> 138 <td>テスト</td> 139 <td>テスト</td> 140 <td>テストテストテストテストテストテストテストテストテスト</td> 141 <td>テスト</td> 142 <td>テスト</td> 143 <td>テスト</td> 144 <td>テストテストテストテストテストテストテストテストテスト</td> 145 <td>テスト</td> 146 <td>テスト</td> 147 <td>テスト</td> 148 </tr> 149 <tr> 150 <th>00004</th> 151 <td>テスト</td> 152 <td>テスト</td> 153 <td>テスト</td> 154 <td>テストテストテストテストテストテストテストテストテスト</td> 155 <td>テスト</td> 156 <td>テスト</td> 157 <td>テスト</td> 158 <td>テストテストテストテストテストテストテストテストテスト</td> 159 <td>テスト</td> 160 <td>テスト</td> 161 <td>テスト</td> 162 </tr> 163 <tr> 164 <th>00005</th> 165 <td>テスト</td> 166 <td>テストテスト</td> 167 <td>テスト</td> 168 <td>テストテストテストテストテストテストテスト</td> 169 <td>テスト</td> 170 <td>テスト</td> 171 <td>テスト</td> 172 <td>テストテストテストテストテストテストテストテストテスト</td> 173 <td>テスト</td> 174 <td>テスト</td> 175 <td>テスト</td> 176 </tr> 177 <tr> 178 <th>00006</th> 179 <td>テスト</td> 180 <td>テスト</td> 181 <td>テストテスト</td> 182 <td>テストテストテストテストテストテストテスト</td> 183 <td>テスト</td> 184 <td>テスト</td> 185 <td>テスト</td> 186 <td>テストテストテストテストテストテストテストテストテスト</td> 187 <td>テスト</td> 188 <td>テスト</td> 189 <td>テスト</td> 190 </tr> 191 <tr> 192 <th>00007</th> 193 <td>テスト</td> 194 <td>テスト</td> 195 <td>テスト</td> 196 <td>テストテストテストテストテストテストテスト</td> 197 <td>テスト</td> 198 <td>テスト</td> 199 <td>テストテスト</td> 200 <td>テストテストテストテストテストテストテストテストテスト</td> 201 <td>テスト</td> 202 <td>テスト</td> 203 <td>テスト</td> 204 </tr> 205 <tr> 206 <th>00008</th> 207 <td>テスト</td> 208 <td>テスト</td> 209 <td>テスト</td> 210 <td>テストテストテストテストテストテストテスト</td> 211 <td>テスト</td> 212 <td>テスト</td> 213 <td>テスト</td> 214 <td>テストテストテストテストテストテストテストテストテスト</td> 215 <td>テスト</td> 216 <td>テスト</td> 217 <td>テスト</td> 218 </tr> 219 <tr> 220 <th>00009</th> 221 <td>テスト</td> 222 <td>テストテスト</td> 223 <td>テスト</td> 224 <td>テストテストテストテストテストテストテスト</td> 225 <td>テスト</td> 226 <td>テスト</td> 227 <td>テスト</td> 228 <td>テストテストテストテストテストテストテストテストテスト</td> 229 <td>テスト</td> 230 <td>テスト</td> 231 <td>テスト</td> 232 </tr> 233 <tr> 234 <th>00010</th> 235 <td>テスト</td> 236 <td>テスト</td> 237 <td>テスト</td> 238 <td>テストテストテストテストテストテストテスト</td> 239 <td>テストテスト</td> 240 <td>テスト</td> 241 <td>テスト</td> 242 <td>テストテストテストテストテストテストテストテストテスト</td> 243 <td>テスト</td> 244 <td>テスト</td> 245 <td>テスト</td> 246 </tr> 247 <tr> 248 <th>00011</th> 249 <td>テスト</td> 250 <td>テスト</td> 251 <td>テスト</td> 252 <td>テストテストテストテストテストテストテスト</td> 253 <td>テスト</td> 254 <td>テストテスト</td> 255 <td>テスト</td> 256 <td>テストテストテストテストテストテストテストテストテスト</td> 257 <td>テスト</td> 258 <td>テスト</td> 259 <td>テスト</td> 260 </tr> 261 <tr> 262 <th>00012</th> 263 <td>テストテスト</td> 264 <td>テスト</td> 265 <td>テスト</td> 266 <td>テストテストテストテストテストテストテスト</td> 267 <td>テスト</td> 268 <td>テスト</td> 269 <td>テスト</td> 270 <td>テストテストテストテストテストテストテストテストテスト</td> 271 <td>テスト</td> 272 <td>テスト</td> 273 <td>テスト</td> 274 </tr> 275 <tr> 276 <th>00013</th> 277 <td>テスト</td> 278 <td>テスト</td> 279 <td>テスト</td> 280 <td>テストテストテストテストテストテストテストテストテスト</td> 281 <td>テスト</td> 282 <td>テスト</td> 283 <td>テスト</td> 284 <td>テストテストテストテストテストテストテストテストテスト</td> 285 <td>テスト</td> 286 <td>テスト</td> 287 <td>テスト</td> 288 </tr> 289 <tr> 290 <th>00014</th> 291 <td>テスト</td> 292 <td>テスト</td> 293 <td>テスト</td> 294 <td>テストテストテストテストテストテストテスト</td> 295 <td>テスト</td> 296 <td>テスト</td> 297 <td>テスト</td> 298 <td>テストテストテストテストテストテストテストテストテスト</td> 299 <td>テスト</td> 300 <td>テスト</td> 301 <td>テスト</td> 302 </tr> 303 <tr> 304 <th>00015</th> 305 <td>テスト</td> 306 <td>テスト</td> 307 <td>テスト</td> 308 <td>テストテストテストテストテストテストテストテストテスト</td> 309 <td>テスト</td> 310 <td>テスト</td> 311 <td>テスト</td> 312 <td>テストテストテストテストテストテストテストテストテスト</td> 313 <td>テスト</td> 314 <td>テスト</td> 315 <td>テスト</td> 316 </tr> 317 <tr> 318 <th>00016</th> 319 <td>テスト</td> 320 <td>テスト</td> 321 <td>テスト</td> 322 <td>テストテストテストテストテストテストテストテストテスト</td> 323 <td>テスト</td> 324 <td>テスト</td> 325 <td>テスト</td> 326 <td>テストテストテストテストテストテストテストテストテスト</td> 327 <td>テスト</td> 328 <td>テスト</td> 329 <td>テスト</td> 330 </tr> 331 <tr> 332 <th>00017</th> 333 <td>テスト</td> 334 <td>テストテスト</td> 335 <td>テスト</td> 336 <td>テストテストテストテストテストテストテスト</td> 337 <td>テスト</td> 338 <td>テスト</td> 339 <td>テスト</td> 340 <td>テストテストテストテストテストテストテストテストテスト</td> 341 <td>テスト</td> 342 <td>テスト</td> 343 <td>テスト</td> 344 </tr> 345 <tr> 346 <th>00018</th> 347 <td>テスト</td> 348 <td>テスト</td> 349 <td>テストテスト</td> 350 <td>テストテストテストテストテストテストテスト</td> 351 <td>テスト</td> 352 <td>テスト</td> 353 <td>テスト</td> 354 <td>テストテストテストテストテストテストテストテストテスト</td> 355 <td>テスト</td> 356 <td>テスト</td> 357 <td>テスト</td> 358 </tr> 359 <tr> 360 <th>00019</th> 361 <td>テスト</td> 362 <td>テスト</td> 363 <td>テスト</td> 364 <td>テストテストテストテストテストテストテスト</td> 365 <td>テスト</td> 366 <td>テスト</td> 367 <td>テストテスト</td> 368 <td>テストテストテストテストテストテストテストテストテスト</td> 369 <td>テスト</td> 370 <td>テスト</td> 371 <td>テスト</td> 372 </tr> 373 <tr> 374 <th>00020</th> 375 <td>テスト</td> 376 <td>テスト</td> 377 <td>テスト</td> 378 <td>テストテストテストテストテストテストテスト</td> 379 <td>テスト</td> 380 <td>テスト</td> 381 <td>テスト</td> 382 <td>テストテストテストテストテストテストテストテストテスト</td> 383 <td>テスト</td> 384 <td>テスト</td> 385 <td>テスト</td> 386 </tr> 387 <tr> 388 <th>00021</th> 389 <td>テスト</td> 390 <td>テストテスト</td> 391 <td>テスト</td> 392 <td>テストテストテストテストテストテストテスト</td> 393 <td>テスト</td> 394 <td>テスト</td> 395 <td>テスト</td> 396 <td>テストテストテストテストテストテストテストテストテスト</td> 397 <td>テスト</td> 398 <td>テスト</td> 399 <td>テスト</td> 400 </tr> 401 </tbody> 402 </table> 403 404</body> 405</html>
ネットからのスクリプトや、ネットに繋がるようなコードは使用不可です。(jqueryなど）
javascriptを使用する場合は、埋め込みで、かなりシンプルなコードだと個人的に助かります。
また、編集していきたいので、出来る限り、高度なコードではなく、シンプルなコードだと嬉しいです。
何卒よろしくお願いいたします。
回答1件
0
ベストアンサー
1つ目のテーブルについてはよくわかりませんが、とりあえず上部の見出しも左の見出しも固定したいと考えているものとして組みなおしてあります。
「table 見出し固定」で検索して初めに出てきたサイトhttps://qiita.com/orangain/items/6268b6528ab33b27f8f2を参考にしています。
html
1 <table class="kotei_table"> 2 <thead> 3 <tr> 4 <th>見出し1</th> 5 <th>見出し2</th> 6 <th>見出し3</th> 7 <th>見出し4</th> 8 <th>見出し5</th> 9 <th>見出し6</th> 10 <th>見出し7</th> 11 <th>見出し8</th> 12 </tr> 13 </thead> 14 <tbody> 15 <tr> 16 <th>00001</th> 17 <td>テスト</td> 18 <td>テスト</td> 19 <td>テスト</td> 20 <td>テストテストテストテストテストテストテストテストテスト</td> 21 <td>テスト</td> 22 <td>テスト</td> 23 <td>テスト</td> 24 </tr> 25 <tr> 26 <th>00002</th> 27 <td>テスト</td> 28 <td>テスト</td> 29 <td>テスト</td> 30 <td>テストテストテストテストテストテストテスト</td> 31 <td>テスト</td> 32 <td>テスト</td> 33 <td>テスト</td> 34 </tr> 35 <tr> 36 <th>00003</th> 37 <td>テスト</td> 38 <td>テスト</td> 39 <td>テスト</td> 40 <td>テストテストテストテストテストテストテストテストテスト</td> 41 <td>テスト</td> 42 <td>テスト</td> 43 <td>テスト</td> 44 </tr> 45 <tr> 46 <th>00004</th> 47 <td>テスト</td> 48 <td>テスト</td> 49 <td>テスト</td> 50 <td>テストテストテストテストテストテストテストテストテスト</td> 51 <td>テスト</td> 52 <td>テスト</td> 53 <td>テスト</td> 54 </tr> 55 <tr> 56 <th>00005</th> 57 <td>テスト</td> 58 <td>テストテスト</td> 59 <td>テスト</td> 60 <td>テストテストテストテストテストテストテスト</td> 61 <td>テスト</td> 62 <td>テスト</td> 63 <td>テスト</td> 64 </tr> 65 <tr> 66 <th>00006</th> 67 <td>テスト</td> 68 <td>テスト</td> 69 <td>テストテスト</td> 70 <td>テストテストテストテストテストテストテスト</td> 71 <td>テスト</td> 72 <td>テスト</td> 73 <td>テスト</td> 74 </tr> 75 <tr> 76 <th>00007</th> 77 <td>テスト</td> 78 <td>テスト</td> 79 <td>テスト</td> 80 <td>テストテストテストテストテストテストテスト</td> 81 <td>テスト</td> 82 <td>テスト</td> 83 <td>テストテスト</td> 84 </tr> 85 <tr> 86 <th>00008</th> 87 <td>テスト</td> 88 <td>テスト</td> 89 <td>テスト</td> 90 <td>テストテストテストテストテストテストテスト</td> 91 <td>テスト</td> 92 <td>テスト</td> 93 <td>テスト</td> 94 </tr> 95 <tr> 96 <th>00009</th> 97 <td>テスト</td> 98 <td>テストテスト</td> 99 <td>テスト</td> 100 <td>テストテストテストテストテストテストテスト</td> 101 <td>テスト</td> 102 <td>テスト</td> 103 <td>テスト</td> 104 </tr> 105 <tr> 106 <th>00010</th> 107 <td>テスト</td> 108 <td>テスト</td> 109 <td>テスト</td> 110 <td>テストテストテストテストテストテストテスト</td> 111 <td>テストテスト</td> 112 <td>テスト</td> 113 <td>テスト</td> 114 </tr> 115 <tr> 116 <th>00011</th> 117 <td>テスト</td> 118 <td>テスト</td> 119 <td>テスト</td> 120 <td>テストテストテストテストテストテストテスト</td> 121 <td>テスト</td> 122 <td>テストテスト</td> 123 <td>テスト</td> 124 </tr> 125 <tr> 126 <th>00012</th> 127 <td>テストテスト</td> 128 <td>テスト</td> 129 <td>テスト</td> 130 <td>テストテストテストテストテストテストテスト</td> 131 <td>テスト</td> 132 <td>テスト</td> 133 <td>テスト</td> 134 </tr> 135 </tbody> 136 </table>
css
1 table.kotei_table { 2 border-collapse: collapse; 3 border-spacing: 0; 4 padding: 0; 5 margin: 0; 6 } 7 8 .kotei_table th, 9 .kotei_table td { 10 white-space: nowrap; 11 padding: 5px; 12 font-weight: normal; 13 } 14 15 .kotei_table thead th { 16 position: -webkit-sticky; 17 position: sticky; 18 top: 0; 19 z-index: 1; 20 background: #ccc; 21 } 22 23 .kotei_table thead th:first-child { 24 z-index: 2; 25 } 26 27 .kotei_table th:first-child { 28 position: -webkit-sticky; 29 position: sticky; 30 left: 0; 31 } 32 33 .kotei_table tbody th { 34 background-color: #eee; 35 } 36
投稿2020/04/08 07:45
総合スコア3235
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/04/08 08:27
2020/04/08 10:20
2020/04/08 12:05
2020/04/08 12:34
2020/04/08 13:22