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

質問編集履歴

2

試してみたこと追加

2020/09/28 05:52

投稿

tennis
tennis

スコア19

title CHANGED
File without changes
body CHANGED
@@ -8,32 +8,68 @@
8
8
  ### コード
9
9
  ```html
10
10
  <div class="scroll-table">
11
- <table>
11
+ <table border="1">
12
12
  <tr>
13
- <th>都道府県</th>
13
+ <th>名前</th>
14
14
  <th>面積</th>
15
15
  <th>人口</th>
16
16
  <th>人口密度</th>
17
+ <th>人口密度</th>
18
+ <th>人口密度</th>
19
+ <th>人口密度</th>
20
+ <th>人口密度</th>
17
21
  </tr>
18
22
  <tr>
19
23
  <td>愛知県</td>
20
- <td>5,172km2</td>
21
- <td>7,526,911人</td>
22
- <td>hogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehoge
23
- hogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehoge</td>
24
+ <td>hogehoghogehogehogehogehogehogehogehogehogehogehogehogehogehogehogeehoge</td>
25
+ <td>私の長所はリーダーシップです。アルバイトスタッフ6人をまとめる役割を任された時に、ただ仕事を教え売り上げ目標の数字を伝えるだけでなく、どうすれば達成できるか全員を巻き込んで一緒に考えるようにしました。</td>
26
+ <td>
27
+ 私の長所はリーダーシップです。アルバイトスタッフ6人をまとめる役割を任された時に、ただ仕事を教え売り上げ目標の数字を伝えるだけでなく、どうすれば達成できるか全員を巻き込んで一緒に考えるようにしました。
28
+ </td>
29
+ <td>
30
+ 私の長所はリーダーシップです。アルバイトスタッフ6人をまとめる役割を任された時に、ただ仕事を教え売り上げ目標の数字を伝えるだけでなく、どうすれば達成できるか全員を巻き込んで一緒に考えるようにしました。
31
+ </td>
32
+ <td>
33
+ 私の長所はリーダーシップです。アルバイトスタッフ6人をまとめる役割を任された時に、ただ仕事を教え売り上げ目標の数字を伝えるだけでなく、どうすれば達成できるか全員を巻き込んで一緒に考えるようにしました。
34
+ </td>
35
+ <td>
36
+ 私の長所はリーダーシップです。アルバイトスタッフ6人をまとめる役割を任された時に、ただ仕事を教え売り上げ目標の数字を伝えるだけでなく、どうすれば達成できるか全員を巻き込んで一緒に考えるようにしました。
37
+ </td>
38
+ <td>
39
+ 私の長所はリーダーシップです。アルバイトスタッフ6人をまとめる役割を任された時に、ただ仕事を教え売り上げ目標の数字を伝えるだけでなく、どうすれば達成できるか全員を巻き込んで一緒に考えるようにしました。
40
+ </td>
24
41
  </tr>
25
42
  <tr>
26
43
  <td>東京都</td>
27
- <td>hogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehoge
28
- hogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehoge</td>
44
+ <td>2,193km2</td>
29
45
  <td>13,742,906人</td>
30
- <td>6,263/km2</td>
46
+ <td>13,742,906人</td>
47
+ <td>13,742,906人</td>
48
+ <td>13,742,906人</td>
49
+ <td>13,742,906人</td>
50
+ <td>13,742,906人</td>
31
51
  </tr>
32
52
  <tr>
33
53
  <td>大阪府</td>
54
+ <td>
55
+ 私の長所はリーダーシップです。アルバイトスタッフ6人をまとめる役割を任された時に、ただ仕事を教え売り上げ目標の数字を伝えるだけでなく、どうすれば達成できるか全員を巻き込んで一緒に考えるようにしました。
34
- <td></td>
56
+ </td>
57
+ <td>
58
+ 私の長所はリーダーシップです。アルバイトスタッフ6人をまとめる役割を任された時に、ただ仕事を教え売り上げ目標の数字を伝えるだけでなく、どうすれば達成できるか全員を巻き込んで一緒に考えるようにしました。
59
+ </td>
60
+ <td>
61
+ 私の長所はリーダーシップです。アルバイトスタッフ6人をまとめる役割を任された時に、ただ仕事を教え売り上げ目標の数字を伝えるだけでなく、どうすれば達成できるか全員を巻き込んで一緒に考えるようにしました。
62
+ </td>
63
+ <td>
64
+ 私の長所はリーダーシップです。アルバイトスタッフ6人をまとめる役割を任された時に、ただ仕事を教え売り上げ目標の数字を伝えるだけでなく、どうすれば達成できるか全員を巻き込んで一緒に考えるようにしました。
65
+ </td>
66
+ <td>
67
+ 私の長所はリーダーシップです。アルバイトスタッフ6人をまとめる役割を任された時に、ただ仕事を教え売り上げ目標の数字を伝えるだけでなく、どうすれば達成できるか全員を巻き込んで一緒に考えるようにしました。
68
+ </td>
69
+ <td>
70
+ 私の長所はリーダーシップです。アルバイトスタッフ6人をまとめる役割を任された時に、ただ仕事を教え売り上げ目標の数字を伝えるだけでなく、どうすれば達成できるか全員を巻き込んで一緒に考えるようにしました。
71
+ </td>
35
72
  <td>8,831,642人</td>
36
- <td>4,635人/km2</td>
37
73
  </tr>
38
74
  </table>
39
75
  </div>
@@ -41,14 +77,17 @@
41
77
  ```css
42
78
  .scroll-table {
43
79
  overflow: auto;
44
- white-space: nowrap;
45
80
  }
81
+
82
+ .scroll-table td {
83
+ overflow-wrap: break-word;
84
+ max-width: 500px;
85
+ min-width: 100px;
86
+ }
46
87
  ```
47
- ![スクロルのみ実装](7e40aedeef13b312d42f242768815f40.png)
88
+ ![イメジ説明](4453acf41de1d56fed08e273ba727983.png)
48
89
 
49
- ### 問題(添付した画像ではスクロールは実現できています)
90
+ ### 修正
50
- 「面積」に書かれているhogehogeが横にずらっと伸びてしまう。
51
-  →white-space: nowrap;が原因
52
-  ただ、これをnormalにしたり、外したりすると画面幅で収まってしまい、横スクロールができなくなる
53
-
54
- どのようにすれば横スクロール改行を両立きるのでしょうかご教授願います。
91
+ 添付画像にあるように、日本語だけのころmin-widthが効てしっています。
92
+ 英語のときはmax-widthが効いています。
93
+ これを日本語のときもmax-widthのほうを効かせたいです。

1

コードミス

2020/09/28 05:52

投稿

tennis
tennis

スコア19

title CHANGED
File without changes
body CHANGED
@@ -19,11 +19,13 @@
19
19
  <td>愛知県</td>
20
20
  <td>5,172km2</td>
21
21
  <td>7,526,911人</td>
22
+ <td>hogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehoge
22
- <td></td>
23
+ hogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehoge</td>
23
24
  </tr>
24
25
  <tr>
25
26
  <td>東京都</td>
27
+ <td>hogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehoge
26
- <td></td>
28
+ hogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehoge</td>
27
29
  <td>13,742,906人</td>
28
30
  <td>6,263人/km2</td>
29
31
  </tr>