外部スタイルシートを使ってテーブルの幅を固定する方法について（アルファベットの解除？）

質問

テーブルで幅を固定した場合に、アルファベットの文字を続けて入れると、
それが改行されず、横に終わるまで続き、結果、固定した幅を無視した
状態で表示されてしまいます。
たとえば「aaaaaaaaaaaaaaaa」とう文字を入れた場合でも、
幅が固定されていれば自動的に
aaa
aaa
aaa
aaa
aaa
と改行される方法はないでしょうか？
どんな状況でも幅を固定にしたいと思っています。

<table id="tukuttemitayo">
<tr>
<th>aa</th>
<th>bb</th>
<th>dd</th>
<th>ee</th>
<th>ee</th>
<th>gg</th>
<th>we</th>
<th>sdfsd</th>
<th>3ew</th>
<th>asf</th>
<th>saf</th>
</tr>

<tr>
<td>36</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaasaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>有り</td>
<td>無し</td>
<td>neko</td>
<td>ham</td>
<td>表示中</td>
<td>ささ</td>
<td>ささ</td>
<td>ささ</td>
<td>ささ</td>
</tr>

<tr>
<td>87</td>
<td>こんちわ</td>
<td>有り</td>
<td>無し</td>
<td>2008-03-13 14:33:22</td>
<td>sd</td>
<td>sfd</td>
<td>sfd</td>
<td>sdf</td>
<td>sdf</td>
<td>df</td>
</tr>
</table>

#tukuttemitayo{
border-collapse:collapse;
width:330px;
background:red;
border:none;
}

#tukuttemitayo th {
width:30px;
border:solid 3px #00FF66;
background:yellow;
}

#tukuttemitayo td {
background:pink;
width:30px;
}

あと、すごく初歩的な事かもしれませんが、
tableに設定するwidthの幅はthやtdのborderの幅も含めて計算しなくてはならないのでしょうか？

<table>
<tr>
<th></th><td></td>
</tr>
<tr>
<th></th><td></td>
</tr>
</table>

table { width:104px }　←borderがあるので100ではなく104にする?
tr {width:50px border:1px }
td {width:50px border:1px}

どんな条件でもテーブルで固定される幅を作りたいです。
よろしくお願いします。

回答No.1

abril · ベストアンサー

> テーブルで幅を固定した場合に、アルファベットの文字を続けて入れると、
> それが改行されず、横に終わるまで続き、結果、固定した幅を無視した
> 状態で表示されてしまいます。

「アルファベットの文字を続けて入れ」たデータとは、即ち1ワード、という事ですから仕様上そうなるのが当然の事なんですが…これに拘る方、少なくないのでしょうか。ほぼ同様の質問が最近ありましたので、対処方法と考え方については下記を参照してはいかがでしょう。
http://oshiete1.goo.ne.jp/qa3840028.html

> tableに設定するwidthの幅はthやtdのborderの幅も含めて計算しなくてはならないのでしょうか？

セルにwidthを指定した場合borderやpaddingの値をどう解釈するかは、諸条件（主にDOCTYPEとメジャーなモダン・ブラウザの種類）により解釈が異なります。
以下のコンテンツの比較検証結果などは参考になると思います。
http://www.d-spica.com/try/table-width.html
http://2xup.org/log/2007/07/27-2111

> どんな条件でもテーブルで固定される幅を作りたいです。

上記であげた参考サイトでの実験でも一目瞭然ですが、<table>内のセルの幅を全て絶対値（px）で固定してしまうと、環境による表示結果に顕著な差が出てしまいかねないので、個人的にはあまりお奨めはしません。どこかに「逃げ」を残しておいた方が良いと思います。データ量の少ないセル（例えば、商品一覧だったら一列目の型番とか、名刺情報だったら氏名の列とか、ある程度以上の量にならない事が見込める様なデータですね）のみ固定値、残りは成り行き任せにする…とか。
私は滅多にセルのwidthは固定値にしません（セル内のデータが画像の場合はその限りではありませんが）。各列にある程度の比率を持たせたい場合はパーセンテージで指定しますね。

お礼

ありがとうございました。データベースから値を取り出した時に表示する方法に困っていました。スクロールバーで対応したいと思います。とても参考になりました。