回答編集履歴
2
説明追記
answer
CHANGED
@@ -50,4 +50,9 @@
|
|
50
50
|
|
51
51
|
thead はスクロールバーの幅だけ狭くしないと少しずれます。
|
52
52
|
ただ、スクロールバーの幅はブラウザやOSで異なる可能性があるのでその辺は検証してください。
|
53
|
-
上記のコードは Windows の Chrome に合わせてます。
|
53
|
+
上記のコードは Windows の Chrome に合わせてます。
|
54
|
+
|
55
|
+
floatだと幅を狭くして折り返された時、高さが揃わない。
|
56
|
+

|
57
|
+
flexだと揃う。
|
58
|
+

|
1
コードにコメント追記
answer
CHANGED
@@ -27,20 +27,14 @@
|
|
27
27
|
}
|
28
28
|
|
29
29
|
tr {
|
30
|
-
display: flex;
|
30
|
+
display: flex; /* 横並び */
|
31
31
|
}
|
32
32
|
|
33
33
|
thead {
|
34
34
|
display: block;
|
35
|
-
width: Calc(100% - 20px);
|
35
|
+
width: Calc(100% - 20px); /* スクロールバーの幅を引く */
|
36
36
|
}
|
37
37
|
|
38
|
-
tbody {
|
39
|
-
overflow-x: hidden;
|
40
|
-
overflow-y: scroll;
|
41
|
-
height: 100px;
|
42
|
-
}
|
43
|
-
|
44
38
|
.number {
|
45
39
|
width: 25%;
|
46
40
|
}
|