tableタグで横スクロールと改行を両立させたい

解決したいこと

HTMLのtableタグで横スクロールと改行を両立させたいです。
①tableの全体の幅は指定なし（thの数によって変化する）
②長い文章があるところはmax-widthを500pxにして改行、短い文章しかないところは300pxなど
③どこのtdに長い文章がくるかは指定できない（for文で入れたいため）

※例題のコードではfor文でやっていません。

コード

html
1  <div class="scroll-table">
2    <table border="1">
3      <tr>
4        <th>名前</th>
5        <th>面積</th>
6        <th>人口</th>
7        <th>人口密度</th>
8        <th>人口密度</th>
9        <th>人口密度</th>
10        <th>人口密度</th>
11        <th>人口密度</th>
12      </tr>
13      <tr>
14        <td>愛知県</td>
15        <td>hogehoghogehogehogehogehogehogehogehogehogehogehogehogehogehogehogeehoge</td>
16        <td>私の長所はリーダーシップです。アルバイトスタッフ6人をまとめる役割を任された時に、ただ仕事を教え売り上げ目標の数字を伝えるだけでなく、どうすれば達成できるか全員を巻き込んで一緒に考えるようにしました。</td>
17        <td>
18          私の長所はリーダーシップです。アルバイトスタッフ6人をまとめる役割を任された時に、ただ仕事を教え売り上げ目標の数字を伝えるだけでなく、どうすれば達成できるか全員を巻き込んで一緒に考えるようにしました。
19        </td>
20        <td>
21          私の長所はリーダーシップです。アルバイトスタッフ6人をまとめる役割を任された時に、ただ仕事を教え売り上げ目標の数字を伝えるだけでなく、どうすれば達成できるか全員を巻き込んで一緒に考えるようにしました。
22        </td>
23        <td>
24          私の長所はリーダーシップです。アルバイトスタッフ6人をまとめる役割を任された時に、ただ仕事を教え売り上げ目標の数字を伝えるだけでなく、どうすれば達成できるか全員を巻き込んで一緒に考えるようにしました。
25        </td>
26        <td>
27          私の長所はリーダーシップです。アルバイトスタッフ6人をまとめる役割を任された時に、ただ仕事を教え売り上げ目標の数字を伝えるだけでなく、どうすれば達成できるか全員を巻き込んで一緒に考えるようにしました。
28        </td>
29        <td>
30          私の長所はリーダーシップです。アルバイトスタッフ6人をまとめる役割を任された時に、ただ仕事を教え売り上げ目標の数字を伝えるだけでなく、どうすれば達成できるか全員を巻き込んで一緒に考えるようにしました。
31        </td>
32      </tr>
33      <tr>
34        <td>東京都</td>
35        <td>2,193km2</td>
36        <td>13,742,906人</td>
37        <td>13,742,906人</td>
38        <td>13,742,906人</td>
39        <td>13,742,906人</td>
40        <td>13,742,906人</td>
41        <td>13,742,906人</td>
42      </tr>
43      <tr>
44        <td>大阪府</td>
45        <td>
46          私の長所はリーダーシップです。アルバイトスタッフ6人をまとめる役割を任された時に、ただ仕事を教え売り上げ目標の数字を伝えるだけでなく、どうすれば達成できるか全員を巻き込んで一緒に考えるようにしました。
47        </td>
48        <td>
49         私の長所はリーダーシップです。アルバイトスタッフ6人をまとめる役割を任された時に、ただ仕事を教え売り上げ目標の数字を伝えるだけでなく、どうすれば達成できるか全員を巻き込んで一緒に考えるようにしました。
50        </td>
51        <td>
52          私の長所はリーダーシップです。アルバイトスタッフ6人をまとめる役割を任された時に、ただ仕事を教え売り上げ目標の数字を伝えるだけでなく、どうすれば達成できるか全員を巻き込んで一緒に考えるようにしました。
53        </td>
54        <td>
55          私の長所はリーダーシップです。アルバイトスタッフ6人をまとめる役割を任された時に、ただ仕事を教え売り上げ目標の数字を伝えるだけでなく、どうすれば達成できるか全員を巻き込んで一緒に考えるようにしました。
56        </td>
57        <td>
58          私の長所はリーダーシップです。アルバイトスタッフ6人をまとめる役割を任された時に、ただ仕事を教え売り上げ目標の数字を伝えるだけでなく、どうすれば達成できるか全員を巻き込んで一緒に考えるようにしました。
59        </td>
60        <td>
61          私の長所はリーダーシップです。アルバイトスタッフ6人をまとめる役割を任された時に、ただ仕事を教え売り上げ目標の数字を伝えるだけでなく、どうすれば達成できるか全員を巻き込んで一緒に考えるようにしました。
62        </td>
63        <td>8,831,642人</td>
64      </tr>
65    </table>
66  </div>

css
1.scroll-table {
2  overflow: auto;
3}
4
5.scroll-table td {
6  overflow-wrap: break-word;
7  max-width: 500px;
8  min-width: 100px;
9}

修正

添付画像にあるように、日本語だけのところでは、min-widthが効いてしまっています。
英語のときはmax-widthが効いています。
これを日本語のときもmax-widthのほうを効かせたいです。

miyabi_pudding

2020/09/28 02:59

tableの横幅を決めちゃうじゃダメなんですか？

miyabi_pudding

2020/09/28 03:03

要件をもう少し具体的にお願いします。でないと、的を射た回答は得ずらいでしょう。 table自体の大きさはautoだが、ページ領域よりはみ出した場合スクロールしたい、で合ってますか？また、文章部分に関して、ある一定の幅で改行を加えたいなら、画面に対して何%かなど基準を設けてください。

kuma_kuma_

2020/09/28 03:12

確認 table自体が画面より大きくなれば画面の横スクロールは付きます。これは<td>タグの文字数によってです。でmax-widthを500pxをかにすれば当然<td>タグが狭くなります。そうすればtableの幅自体狭くなって画面内に収まります。そうしたら横スクロールはなくなります。上の理由から文字の改行すれば当然横スクロールが無くなります。あとは<tr>に幅を持たせればtableは大きさが一定になり横スクロールが有りになります。で結局どうしたいのかが見えないのですが．．．。

行動規範の内容に同意します

回答3件

ベストアンサー

td に max-width とmin-width を適切に設定すればどうでしょうか。
table には overflow: auto; を設定する。

css
1.scroll-table {
2  overflow: auto;
3}
4
5.scroll-table td {
6  overflow-wrap: break-word;
7  max-width: 500px;
8  min-width: 100px;
9}

MDNによると word-break: break-word; は非推奨とされているようです。

word-break - CSS: カスケーディングスタイルシート | MDN

投稿2020/09/28 03:01

編集2020/09/28 03:03

hatena19

総合スコア34040

kuma_kuma_

2020/09/28 03:32

ご指摘ありがとうございます修正しておきました。

tennis

2020/09/28 03:59

回答ありがとうございます。上記のコードで実現できました。回答していただいた皆様、自分の質問の仕方が悪く、時間をとらせてしまい、申し訳ありませんでした。

tennis

2020/09/28 04:25

解決済み、にしたのにすみません。長い文章「hegehoge...」だとmax-width:500が効いていい感じになったのですが、日本語の長い文章にするとmax-widthが効かず、min-width:100のほうが効いてしまいました。

kuma_kuma_

2020/09/28 04:37

いま質問者様のしたい事がはっきりしないので回答できなくなってきています。解決済みにしてしまったので「再質問」とタイトルに入れてもう一度質問を整理して質問を上げたほうが良いよ？

miyabi_pudding

2020/09/28 05:11

同じ内容のものであれば、未解決に戻して、質問文編集にしたほうがいいです。同じ内容の投稿は推奨されておりませんので。

kuma_kuma_

2020/09/28 05:12

失礼しました。「未解決」に戻せたのですね。

miyabi_pudding

2020/09/28 05:17

質問してから何日か経過しても、まだ解決してない時に、「まだ解決方法を求めています」モードにして、質問を再浮上させることもできます。（ただし低評価数が5以上つくと上には上がらない）同じ内容の質問をしなくて済むような仕様は結構充実してたりします、teratail。

hatena19

2020/09/28 05:18

確かに日本語と英語では動作が異なりますね。日本語だとmin-widthの方で改行されてしまいます。うーん、これは難しいですね。

tennis

2020/09/28 05:21

何度もすみません、未解決に戻させていただきました。hatena様のおっしゃる通り、日本語だとmin-widthが適用されてしまいます。max-widthをmin-widthで上書きされないためにはどうしたらいいのでしょうか…

kuma_kuma_

2020/09/28 05:23

miyabi_takatsukさん情報ありがとうございます。

kuma_kuma_

2020/09/28 05:31

この質問だと文字数が少ない場合には幅を狭めたいという事でいいのかな？ 5文字　min-width 100文字　max-width で折り返し幅自体が固定(%あり)なら簡単なんですがね．．．

tennis

2020/09/28 05:50

そうですね、文字数でwidthを変えたいです。kuma様のおっしゃる通りです。 thとtdにくる値については、固定ではなく、毎回バラバラになり、値ごとに文字数が違うものになります。なので文字数に合わせてwidthが決まってくれればいいなと考えています。ただ英語と日本語表記だとwidthの適用が異なるので、なにか打開策はないかなと…

hatena19

2020/09/28 09:57

ワードラップとか禁則処理とか改行の規則が英語と日本語では根本的に違うので、英語圏のブラウザ開発者が日本語にもきちんと対応してくれる可能性は低いような気がします。 CSSだけではきっと無理だと思われます。 JSでセル毎の文字数を数えてそれに合わせて幅を設定することぐらいしかなさそうです。

kuma_kuma_

2020/09/28 10:03

一応できたんだけど．．．私のやり方じゃダメ？

tennis

2020/10/01 23:54

回答ありがとうございました。kuma様のも試してみたのですが、自分の環境ではうまくいきませんでした。お時間を割いていただきありがとうございました。同僚がtableタグを使わないやり方で解決したので、いったん閉めます。ありがとうございました。

行動規範の内容に同意します

まずwhite-space: nowarp;があるとwrapされないので削除する。

max-widthの指定とword-break: break-all;を組み合わせればいい。対象は.scroll-table tdだけで十分かな。

CSS
1.scroll-table td {
2  max-width: 500px;
3  word-break: break-all;
4}

投稿2020/09/28 02:32

編集2020/09/28 02:34

Daregada

総合スコア11990

tennis

2020/09/28 02:43

回答ありがとうございます。試してみたところ、画面幅で収まってしまい、横スクロールがされなくなってしまいました。tableの横幅は画面幅に収まらず、どんどん横に広がって欲しいです。たとえば、10項目ほどあり、4項目が500pxまで広がり、残りの6項目は300pxくらいで収まったとして、tableの横幅は500×4 + 300×6で3800pxになって、画面幅を超えて横スクロールできるようにしたいです

Daregada

2020/09/28 03:13

min-width: 300px; も追加してみたら?

行動規範の内容に同意します

こういう事？
※レイアウト調整しやすい様に<div>入れています。

CSS
1 div {
2 	/* word-wrap: break-word; 指摘を受け修正 */ 
3 	overflow-wrap: break-word;
4 	max-width: 100px;
5 }

HTML
1<html>
2<head>
3<title>aaa</title>
4<meta charset="UTF-8">
5<script>
6</script>
7</head>
8<body>
9<table>
10	<tr>
11		<td><div>1</div></td>
12		<td><div>2</div></td>
13		<td><div>3</div></td>
14	</tr>
15	<tr>
16		<td><div>1</div></td>
17		<td><div>1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</div></td>
18		<td><div>3</div></td>
19	</tr>
20</table>
21</body>
22</html>

それともこっち？

css
1 div.frame {
2 	max-width: 300px;
3	overflow-x: scroll;
4 }
5 div.inner {	
6	float: left;
7 	max-width: 500px;
8 	/* word-wrap: break-word; 指摘を受け修正 */ 
9 }

HTML
1<html>
2<head>
3<title>aaa</title>
4<meta charset="UTF-8">
5</head>
6<body>
7<table>
8	<tr>
9		<td>1</td>
10		<td>2</td>
11		<td>3</td>
12	</tr>
13	<tr>
14		<td>1</td>
15		<td><div class="frame"><div class="inner">1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</div></div></td>
16		<td>3</td>
17	</tr>
18</table>
19</body>
20</html>

追記
私の知力だとこれが限界
※突っ込みあったら教えてください。

CSS
1td {
2    max-width: 200px;
3}
4td > div {
5    max-width: calc(100%);
6    max-width: -webkit-calc(100%);
7}

HTML
1<html>
2<head>
3<title>aaa</title>
4<meta charset="UTF-8">
5</head>
6<body>
7<table>
8	<tr>
9		<td><div>1</div></td>
10		<td><div>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</div></td>
11		<td><div>あいうえお</div></td>
12		<td><div>4</div></td>
13	</tr>
14</table>
15</body>
16</html>