table の幅を固定したい

質問

初心者です。教えて頂けますか？

テーブル内に、php pear mdb2 を利用して文字列を入れているのですが、
文字列が長いのですが、シングルバイト文字とマルチバイト文字で挙動が異なっています。

指定している幅で固定したいのですが
どうすれば良いでしょうか？
申し訳ありません。よろしくおねがいします。

<table width="380" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>
あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。...
</td>
</tr>
</table>

<table width="380" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>
yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy...
</td>
</tr>
</table>

回答No.2

teruta · ベストアンサー

※非推奨です

テーブルタグの中に
style="word-break: break-all;"
を入れれば一応解決できます。つまり
<table style="word-break: break-all;" width="380" border="1" cellspacing="0" cellpadding="0">
とするわけです。

ですが、対応していないブラウザも多く、推奨しかねます。
他の方法としては、長い英数字の途中に<wbr>を混ぜておく方法があります。
yyyyyyyyyyyyyyyyyyy<wbr>yyyyyyyyyyyyyyyyyyy<wbr>yyyyyyyyyyyyyyyyyyy
このような感じ。
でもこれもあんまり推奨できないな・・

一番いいのは長い英数字を使わない書き方をすることです。
見る人が非常に限られているような閉鎖的サイトなら問題ないと思いますが、そうでなければ少し作意に反しても安全な書き方(スペースで区切る)を心がけることをお勧めします。

お礼

ありがとうございます
そうですね
>長い英数字
がレアケースなんですよね

回答No.4

think49

お勧めはしませんが、HTML文字実体参照で「ゼロ幅空白」(&#x200B;) を指定する方法はあります。
ゼロ幅なので空白が入り込むことはないですし、StrictなHTMLのままでいられます。

yyyyyyy&#x200B;yyyyyyy&#x200B;yyyyyyy&#x200B;yyyyyyy&#x200B;yyyyyyy&#x200B;yyyyyyy&#x200B;yyyyyyy&#x200B;

Unicode文字のマッピング - Wikipedia
http://ja.wikipedia.org/wiki/Unicode%E6%96%87%E5%AD%97%E3%81%AE%E3%83%9E%E3%83%83%E3%83%94%E3%83%B3%E3%82%B0#.E3.82.BC.E3.83.AD.E5.B9.85.E3.81.AE.E5.A2.83.E7.95.8C.E8.A1.A8.E7.A4.BA.E5.AD.90

# 「長すぎる単語にならないようにする」が正攻法だとは思います。

お礼

ありがとうございます
># 「長すぎる単語にならないようにする」が正攻法だとは思います。
そのようにしようと思います

回答No.3

abril

No.1様もご指摘の通り、スペースなしで連続するシングルバイト文字列については”1ワード”として捉えられますので改行は入りません。

ですが、実際にそういう文字列を扱わなければならず、且つテーブルの幅をどうしても固定させたいのであれば、文字列が固定幅の中でスクロールして表示される様な仕様にしてはいかがでしょう。見栄えはあまり良くないですが、幅を固定する事はとりあえず実現できます。

ただし、td要素に直接スクロールのスタイルを指定する事はできないので、マークアップを少し変える必要があります。
例えば下記の様にdivをtdの中に入れ子にして、文字列をdiv内に表示させる様にします。

<table border="0" cellspacing="0" cellpadding="0" class="hoge">
<tr>
<td>
<div>yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</div>
</td>
</tr>
<tr>
<td>
<div>xxxxxxx</div>
</td>
</tr>
</table>

その上で、CSSファイルで

table.hoge {
border-collapse: collapse;
}
table.hoge td {
padding: 1px;
border: solid 1px #000;
}
table.hoge td div {
width: 380px;
_height: 3em;
overflow: auto;
}

とでも指定しておけば、文字列の長さが380px以上であればセル内にスクロールバーが表示される様になります。
"overflow: auto;"ではなく"overflow: scroll;"にすると、高さに関する指定（"_height: 3em;"　IE6用のハック）は不要になりますが、スクロールが不要な短い文字列でも常に縦横スクロールバーの領域が表示される事になります。

お礼

ありがとうございます。

回答No.1

chie65536（@chie65535）

＞文字列が長いのですが、シングルバイト文字とマルチバイト文字で挙動が異なっています。

＞指定している幅で固定したいのですが
＞どうすれば良いでしょうか？

出来ません。

「英単語」の場合「１単語を途中で切って改行して２単語にしてしまうと、元の意味とは全然違った意味になってしまう可能性がある」ので「どんなに長い単語であろうとも、空白や記号やハイフン以外の所では、絶対に改行しない」と言う仕様になっています。

こういう仕様になってないと「英文が変になってしまう可能性」があるのです。

「どうしても途中で改行したい」というならば、文章の意味がガラリと変わってしまう（読み手が意味を取り違える）のを覚悟した上で「明示的な改行」を入れるしかありません。

なお、普通、１語の単語を複数行に渡って書く時は「Base-
ball」のように「ハイフン(-)」を入れ「これは１単語ですよ」と明示します。（ハイフンを入れる場所には法則があり、どこでも入れられる訳ではありません。そして「ハイフン入れ」をコンピュータが自動で行うのは無理です）

お礼

ありがとうございます