Tableを固定する

質問

テーブル内のセルのWidthを100pxとかに指定しても
たくさん文字を入れて100pxを超えるとどんどん横に伸び続けますよね？

これを固定して、文字数が多い場合はセル内で改行して縦に伸ばしたいのですが
どうすればいいでしょうか？

よろしくお願いします。

回答No.3

tumo020 · ベストアンサー

質問時の状況が、半角英数字を半角スペース・ハイフンなどをいれない長文（『aaaaaaaaaaaaaaaaaaaaaa……』など）を打ち込んだとき、と考えた場合です。

　現在のHTMLの仕様で、連続した半角英数は、それひとつで一つの単語としてみなされます（例え1000文字の文字列でも一つの単語と扱われる）。単語の途中で改行されると英文の意味がわからなくなるため、あえて単語の途中での改行を禁止しています。
　そのため、横幅の指定を無視して横に伸びてしまいます。　

　というわけで、これを修正するには、プログラムに「禁則処理を無視させる」必要があります。ですが、これはHTMLでは実現できませんので、別のCSSを使います。

word-break: break-all;

↑これを何らかの形で入れ込んでください。

<table border="1" style="word-break: break-all;">
<tr>
<td　width="100">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
</tr>
<tr>
<td width="100">これで禁則処理を無視して半角英数も改行される</td>
</tr>
</table>

　ただし、これはIEが独自で追加したものだったと思います。ですから、他のブラウザとの出力に差が出てしまうかもしれません。なので私はお勧めしません。

お礼

回答ありがとうございます。

>>現在のHTMLの仕様で、連続した半角英数は、それひとつで一つの単語としてみなされます
>>（例え1000文字の文字列でも一つの単語と扱われる）。

そういうことでしたか‥。

>>というわけで、これを修正するには、プログラムに「禁則処理を無視させる」必要があります。ですが、これはHTMLでは実現できませんので、別のCSSを使います。
>>word-break: break-all;

なるほど、こんなプロパティもあるんですね。
しかし例文に沿って使ってみたところうまくいかず、
以下のように修正してみたところうまく動きました。

・「aaa...」の部分を「<span style="word-break: break-all;">aaa...<span>」に変更。

>>ただし、これはIEが独自で追加したものだったと思います。ですから、他のブラウザとの出力に差が出てしまうかもしれません。なので私はお勧めしません。

そうですか‥。
NNにも対応させる必要があるので何か方法を考えます。

ありがとうございました。

回答No.4

TMEspion

回答します。

>どうすればいいでしょうか？
ANo.3さんが挙げている「word-break」が
クリアブラウザをInternetExplorerのみとした時の回答。

他のブラウザでもやるとすれば、
「半角英数を使用しない」って所でしょうか？

お礼

回答ありがとうございます。

>>他のブラウザでもやるとすれば、
>>「半角英数を使用しない」って所でしょうか？

そうですね。
しかし半角英数を禁止にするわけにはいかないので
サーバ側で半角英数は全角に変更するロジックを組み込むか、
適当に改行を挿入するロジックを組み込もうと考えています。

ありがとうございました。

回答No.2

leap_day

こんにちは

<table style="table-layout: fixed;">
<tr>
<td width="60">
ああ
</td>
<td width="40">
あああああああああああああああああ
</td>
</tr>
<tr>
<td>
あああああああああああああああああああ
</td>
<td>
あああああ
</td>
</tr></table>

1行目でwidth指定すれば残りはそれに準じます

お礼

回答ありがとうございます。

>>1行目でwidth指定すれば残りはそれに準じます

日本語はそうなのですが、
半角アルファベットのみで文章を構成した場合は伸びてしまいます。
table-layoutで固定はされるようですが、
その場合、半角アルファベットが切れてしまいますね。

ありがとうございました。

回答No.1

kekke_mame

改行のタグ＝<br>　（←改行したい所入れる）
と入れれば改行できますよ♪

【例文】
明けまして＜br＞おめでとう＜br＞ございます＜br＞
　　　↓
明けまして
おめでとう
ございます

参考URL：

http://www.tohoho-web.com/how2/table.htm#size

お礼

回答ありがとうございます。

申し訳ありません、質問文を割愛しすぎたかもしれません。

若干込み入った話をしますと、
セル内には動的に変化する値が入るため
固定値で持たせるわけではありません。

上記条件の元、セルの幅を固定するにはどうすればよいか？
という趣旨の質問です。