teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問tableタグで横スクロールと改行を両立させたい

編集履歴

質問編集履歴

2

試してみたこと追加

2020/09/28 05:52

投稿

tennis
tennis

スコア19

test CHANGED
File without changes
test CHANGED
@@ -18,15 +18,23 @@
18
18
 
19
19
  <div class="scroll-table">
20
20
 
21
- <table>
21
+ <table border="1">
22
22
 
23
23
  <tr>
24
24
 
25
- <th>都道府県</th>
25
+ <th>名前</th>
26
26
 
27
27
  <th>面積</th>
28
28
 
29
29
  <th>人口</th>
30
+
31
+ <th>人口密度</th>
32
+
33
+ <th>人口密度</th>
34
+
35
+ <th>人口密度</th>
36
+
37
+ <th>人口密度</th>
30
38
 
31
39
  <th>人口密度</th>
32
40
 
@@ -36,13 +44,39 @@
36
44
 
37
45
  <td>愛知県</td>
38
46
 
39
- <td>5,172km2</td>
47
+ <td>hogehoghogehogehogehogehogehogehogehogehogehogehogehogehogehogehogeehoge</td>
40
48
 
41
- <td>7,526,911人</td>
49
+ <td>私の長所はリーダーシップです。アルバイトスタッフ6人をまとめる役割を任された時に、ただ仕事を教え売り上げ目標の数字を伝えるだけでなく、どうすれば達成できるか全員を巻き込んで一緒に考えるようにしました。</td>
42
50
 
43
- <td>hogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehoge
51
+ <td>
44
52
 
45
- hogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehoge</td>
53
+ 私の長所はリーダーシップです。アルバイトスタッフ6人をまとめる役割を任された時に、ただ仕事を教え売り上げ目標の数字を伝えるだけでなく、どうすれば達成できるか全員を巻き込んで一緒に考えるようにしました。
54
+
55
+ </td>
56
+
57
+ <td>
58
+
59
+ 私の長所はリーダーシップです。アルバイトスタッフ6人をまとめる役割を任された時に、ただ仕事を教え売り上げ目標の数字を伝えるだけでなく、どうすれば達成できるか全員を巻き込んで一緒に考えるようにしました。
60
+
61
+ </td>
62
+
63
+ <td>
64
+
65
+ 私の長所はリーダーシップです。アルバイトスタッフ6人をまとめる役割を任された時に、ただ仕事を教え売り上げ目標の数字を伝えるだけでなく、どうすれば達成できるか全員を巻き込んで一緒に考えるようにしました。
66
+
67
+ </td>
68
+
69
+ <td>
70
+
71
+ 私の長所はリーダーシップです。アルバイトスタッフ6人をまとめる役割を任された時に、ただ仕事を教え売り上げ目標の数字を伝えるだけでなく、どうすれば達成できるか全員を巻き込んで一緒に考えるようにしました。
72
+
73
+ </td>
74
+
75
+ <td>
76
+
77
+ 私の長所はリーダーシップです。アルバイトスタッフ6人をまとめる役割を任された時に、ただ仕事を教え売り上げ目標の数字を伝えるだけでなく、どうすれば達成できるか全員を巻き込んで一緒に考えるようにしました。
78
+
79
+ </td>
46
80
 
47
81
  </tr>
48
82
 
@@ -50,13 +84,19 @@
50
84
 
51
85
  <td>東京都</td>
52
86
 
53
- <td>hogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehoge
54
-
55
- hogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehoge</td>
87
+ <td>2,193km2</td>
56
88
 
57
89
  <td>13,742,906人</td>
58
90
 
59
- <td>6,263人/km2</td>
91
+ <td>13,742,906人</td>
92
+
93
+ <td>13,742,906人</td>
94
+
95
+ <td>13,742,906人</td>
96
+
97
+ <td>13,742,906人</td>
98
+
99
+ <td>13,742,906人</td>
60
100
 
61
101
  </tr>
62
102
 
@@ -64,11 +104,43 @@
64
104
 
65
105
  <td>大阪府</td>
66
106
 
107
+ <td>
108
+
109
+ 私の長所はリーダーシップです。アルバイトスタッフ6人をまとめる役割を任された時に、ただ仕事を教え売り上げ目標の数字を伝えるだけでなく、どうすれば達成できるか全員を巻き込んで一緒に考えるようにしました。
110
+
67
- <td></td>
111
+ </td>
112
+
113
+ <td>
114
+
115
+ 私の長所はリーダーシップです。アルバイトスタッフ6人をまとめる役割を任された時に、ただ仕事を教え売り上げ目標の数字を伝えるだけでなく、どうすれば達成できるか全員を巻き込んで一緒に考えるようにしました。
116
+
117
+ </td>
118
+
119
+ <td>
120
+
121
+ 私の長所はリーダーシップです。アルバイトスタッフ6人をまとめる役割を任された時に、ただ仕事を教え売り上げ目標の数字を伝えるだけでなく、どうすれば達成できるか全員を巻き込んで一緒に考えるようにしました。
122
+
123
+ </td>
124
+
125
+ <td>
126
+
127
+ 私の長所はリーダーシップです。アルバイトスタッフ6人をまとめる役割を任された時に、ただ仕事を教え売り上げ目標の数字を伝えるだけでなく、どうすれば達成できるか全員を巻き込んで一緒に考えるようにしました。
128
+
129
+ </td>
130
+
131
+ <td>
132
+
133
+ 私の長所はリーダーシップです。アルバイトスタッフ6人をまとめる役割を任された時に、ただ仕事を教え売り上げ目標の数字を伝えるだけでなく、どうすれば達成できるか全員を巻き込んで一緒に考えるようにしました。
134
+
135
+ </td>
136
+
137
+ <td>
138
+
139
+ 私の長所はリーダーシップです。アルバイトスタッフ6人をまとめる役割を任された時に、ただ仕事を教え売り上げ目標の数字を伝えるだけでなく、どうすれば達成できるか全員を巻き込んで一緒に考えるようにしました。
140
+
141
+ </td>
68
142
 
69
143
  <td>8,831,642人</td>
70
-
71
- <td>4,635人/km2</td>
72
144
 
73
145
  </tr>
74
146
 
@@ -84,24 +156,30 @@
84
156
 
85
157
  overflow: auto;
86
158
 
159
+ }
160
+
161
+
162
+
163
+ .scroll-table td {
164
+
165
+ overflow-wrap: break-word;
166
+
167
+ max-width: 500px;
168
+
87
- white-space: nowrap;
169
+ min-width: 100px;
88
170
 
89
171
  }
90
172
 
91
173
  ```
92
174
 
93
- ![スクロールのみ実装](7e40aedeef13b312d42f242768815f40.png)
175
+ ![イメージ説明](4453acf41de1d56fed08e273ba727983.png)
94
176
 
95
177
 
96
178
 
97
- ### 問題（添付した画像ではスクロールは実現できています）
179
+ ### 修正
98
180
 
99
- 「面積」に書かれているhogehogeが横にずらっと伸びてしまう。
181
+ 添付画像にあるように、日本語だけのところでは、min-widthが効いてしまっています。
100
182
 
101
- 　→white-space: nowrap;が原因
183
+ 英語のときはmax-widthが効いています。
102
184
 
103
- 　ただ、これをnormalにしたり、外したりすると画面幅で収まってしまい、横スクロールができなくなる
104
-
105
-
106
-
107
- どのようにすれば横スクロールと改行を両立できるのでしょうか、ご教授願います。
185
+ これを日本語のときもmax-widthのほうを効かせたいです。

1

コードミス

2020/09/28 05:52

投稿

tennis
tennis

スコア19

test CHANGED
File without changes
test CHANGED
@@ -40,7 +40,9 @@
40
40
 
41
41
  <td>7,526,911人</td>
42
42
 
43
+ <td>hogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehoge
44
+
43
- <td></td>
45
+ hogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehoge</td>
44
46
 
45
47
  </tr>
46
48
 
@@ -48,7 +50,9 @@
48
50
 
49
51
  <td>東京都</td>
50
52
 
53
+ <td>hogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehoge
54
+
51
- <td></td>
55
+ hogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehoge</td>
52
56
 
53
57
  <td>13,742,906人</td>
54
58