teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

説明追記

2020/04/04 05:08

投稿

hatena19
hatena19

スコア34367

answer CHANGED
@@ -50,4 +50,9 @@
50
50
 
51
51
  thead はスクロールバーの幅だけ狭くしないと少しずれます。
52
52
  ただ、スクロールバーの幅はブラウザやOSで異なる可能性があるのでその辺は検証してください。
53
- 上記のコードは Windows の Chrome に合わせてます。
53
+ 上記のコードは Windows の Chrome に合わせてます。
54
+
55
+ floatだと幅を狭くして折り返された時、高さが揃わない。
56
+ ![イメージ説明](4599db70b582af5d282d2586ff926123.png)
57
+ flexだと揃う。
58
+ ![イメージ説明](880274423861f1dff42027afa2e54d8c.png)

1

コードにコメント追記

2020/04/04 05:08

投稿

hatena19
hatena19

スコア34367

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
  }