掲示板/HTML質問板/過去ログ/一覧/ テーブルのセル幅が統一できない

0 名前： まっさん ： 2006/08/22（火） 07:09 ID:KmV8IBj0

２つの別々のテーブル（表）で、２つとも同じセル幅に合わせたいと思っています。
ところが同じセル幅を指定して、表示してもセルの内部の文字数（？）によって
セル幅がくるってしまい幅が合ってくれません・・・。
合わせる方法を知ってる方、お教え下さい。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
  <title></title>
</head>
<body>
<table border="1" width="800">
  <tr>
    <td width="200">aaaaaaaaaaaaaaaaaaa</td>
    <td width="200">a</td>
    <td width="200">a</td>
    <td width="200">a</td>
  </tr>
</table>
<table border="1" width="800">
  <tr>
    <td width="200">a</td>
    <td width="200">a</td>
    <td width="200">a</td>
    <td width="200">a</td>
  </tr>
</table>

</body>
</html>

1 名前： カヅサツ ◆ThCi95HEzw ： 2006/08/22（火） 07:09 ［URL］ ID:O5hEMlpW: 多くのブラウザでは、pneumonoultramicroscopicsilicovolcanoconiosis のような長い英単語を、要素の横幅を無視して折り返し改行せずに表示しようとします。日本語なら大丈夫なのですが。HTMLやCSSではどうしようもありません。

2 名前： 調子ノリオクン ： 2006/08/22（火） 07:09 ID:/dOZxBMP: そんなことも知らんのか
ダッサー

3 名前：えじ ◆HtEaXt.II9 ： 2006/08/22（火） 07:09 ID:WP1ytrfY: 何をダサいと思うかは人それぞれですが、
今回のことは、私は特にダサいとは思いませんよ。

で、回答される方へのお願いなのですが、
http://www.tagindex.com/bbs/note.html#h301

アドバイスにならないような「文句を言うだけ」の発言は、極力控えるようにしてください。

4 名前： カヅサツ ◆ThCi95HEzw ： 2006/08/22（火） 07:09 ［URL］ ID:O5hEMlpW: いや…　>>2 は単なる荒らしだと思うので、相手にしせぬ方が宜しいかと。

5 名前：えじ ◆HtEaXt.II9 ： 2006/08/22（火） 07:09 ID:WP1ytrfY: たまには管理人らしく、一応フォローを入れておいた方が良いかなと思いまして。。
余計なことだったかもしれませんが…＾＾；

6 名前： まっさん ： 2006/08/22（火） 07:09 ID:KmV8IBj0: どうしようもないようですね・・・。結構当たり前のようで驚いてます(^^;
了解しました。別な方法を何か考えることにします。
ご回答有難う御座いました。

7 名前： Z ◆XTzyosZXcL ： 2006/08/22（火） 07:09 ID:7S9Va0oj: 　仕様書を確認してみましたが、表のセル内容が数値や金額だったりする場合は、単位記号や小数点をchar属性などである程度そろえることが可能なようです（これを応用することで文字列などでも共通符号があればそろえることは不可能ではないかも）。ただ、どこまでユーザーエージェントが仕様に忠実かによるでしょうけれど。
　ただし、長い英単語がある場合は多分>>1でカヅサツさんがおっしゃるとおりになるのではないかと思います。

HTML4.01仕様書該当部分：
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.3.2
http://www.w3.org/TR/html401/struct/tables.html#h-11.3.2

仕様書の読み方など：
http://www.kanzaki.com/works/2001/pub/wsd01.html

　もちろん表関係要素を理解できないユーザーエージェントの場合にはこれらの指定は無視されることでしょう（携帯電話のうち、いわゆる”フルブラウザ”搭載でない機種など）。

＃11.4では音声読み上げブラウザなどでも分かりやすい表組について指針が示されています。

8 名前： Z ◆XTzyosZXcL ： 2006/08/22（火） 07:09 ID:7S9Va0oj: 　他スレッドを見ていて気が付いたのですが、下記スレッドの方法（CSSの全称セレクタ）で解決しそうです。

http://www.tagindex.com/cgi-lib/q1bbs/patio.cgi?mode=view&no=2517

　ただしユーザースタイルシートで制作者スタイルシートを上書きしていたり、CSS非対応環境ではこの方法も無視されるでしょうけれど(^^;

全称セレクタについて：
http://hp.vector.co.jp/authors/VA022006/css/selector.html#universal-selector

＃>>7はちょっと違う方向の話題（桁揃えなどの手法）でした。ごめんなさい。

9 名前： sevi- ： 2006/08/22（火） 07:09 ID:A5/hQl8Z

CSSに

table-layout:fixed;

と設定すれば、セルの内容に関わらず幅が優先されるようになる.
内容が日本語テキスト等、２バイト文字ならこれだけの設定で良い.

が、もし英文字が一行に幅を超えて長く並ぶとブラウザは標準仕様
ではそれを英単語の長い綴りと誤解し、正しくテキストの表示内での折り返しが機能しない.
なので同時に

word-break:all;

を設定し、内容にかかわらずサイズによって強制的に折り返させるよう
指定すると良い.

が、word-breakの方は現在審議中のもので正式発効はされてないCSS指定
であり,現状でこの指定が有効なのは独自に先だち実装したIEブラウザのみである.

なので、内容によってはIE以外のブラウザでは表示がおかしくなる可能性があるので注意.

sevi-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
  <title></title>
</head>
<body>
<table border="1" width="800" style="table-layout:fixed;word-break:break-all;">
  <tr>
    <td width="200">aaaaaaaaaaaaaaaaaaa</td>
    <td width="200">a</td>
    <td width="200">a</td>
    <td width="200">a</td>
  </tr>
</table>
<table border="1" width="800" style="table-layout:fixed;word-break:break-all;">
  <tr>
    <td width="200">a</td>
    <td width="200">a</td>
    <td width="200">a</td>
    <td width="200">a</td>
  </tr>
</table>

</body>
</html>

10 名前： Z ◆XTzyosZXcL ： 2006/08/22（火） 07:09 ID:7S9Va0oj: >>8は全称セレクタ云々でなく、overflowプロパティを使う方法のことでした。済みません。

CSS2仕様書（邦訳）該当部分：
http://www.y-adagio.com/public/standards/tr_css2/visufx.html#overflow

>>9のtable-layoutプロパティには気が付きませんでした。補足ありがとうございます。

CSS2仕様書（邦訳）該当部分：
http://www.y-adagio.com/public/standards/tr_css2/tables.html#width-layout

　ただ、勧告されていない仕様（XTHML2.0、CSS3など）に基づいて作るのはちょっとどうかと思いますよ(^^;。勧告までに変更もあり得ますから。

11 名前： sevi- ： 2006/08/22（火） 07:09 ID:A5/hQl8Z: >ただ、勧告されていない仕様（XTHML2.0、CSS3など）に基づいて作るのはちょっとどうかと

が,TableCellに限らず,連続する英文字が英単語と誤解され,自動改行が幅指定に対して有効に
働かず、結果的に意図したレイアウトが崩れる事があるのは事実なので、現状で何らかの対処を
施す必要性が迫られる事は往々にしてある.
なので現実では制作者は以下いずれかの決断を迫られると思われる.

・word-break:break-all;を使い、IE以外の事は忘れる
・多少崩れる事があっても構わないレイアウトを採用する
・そういった問題が発生しそうな箇所では半角英字を使わない(使うとしても、全角英字を使う)
・スクリプトを用い、自動的に<br/>を代入する処理を実装する
//・フォントサイズ指定を用い、目視で<br/>を代入する(これはやめた方が無難だろう)

Webデザイナーはこの問題に皆一様に頭を抱えるそうだ.
（個人的には２番を採用し、補助として１番と４番を用いるというのを推したい所だ）

sevi-