table要素のwidthの解釈

締切済

質問者：mokpok
質問日時：2012/04/27 11:17
回答数：1件

tableタグを使って次のようなことをしたいと考えています。
・table要素の親はdiv要素
・div要素にはサイズ(width/height)が指定されており、overflow:hiddenとしてある。
・table要素にはサイズを指定しない
・td要素にはサイズを指定する　→つまり、tableのサイズはtdのサイズで決定する

HTML/CSSは次の通りです。
-----------------------------------------------------
div { width: 300px; overflow: hidden; }
table { table-layout: fixed; }
td { width: 170px; }

<div>
<table><tr>
<td>a</td><td>b</td><td>c</td>
</tr></table>
</div>
-----------------------------------------------------

このコードを「DOCTYPE宣言を書かずに」IE8で開くと、想定通りの表示になりますが、
<!DOCTYPE html>と記述すると、tableの横幅が300pxに詰められてしまいます。
td要素のwidth指定が働かず、親のdiv要素のwidthに無理やり押し込められてしまうようです。
また、FirefoxではDOCTYPE宣言無しでも同様の問題が起きてしまいます。

table内の列数は固定ではないので、tableに対してwidth指定はしたくありません。
何か書き方が間違っているのでしょうか。
あるいは、標準準拠モードの仕様では、そもそもできないことをやろうとしているのでしょうか。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： ORUKA1951
回答日時：2012/04/27 17:37

標準モードでは、それが正しい処理ですね。

tableのwidth:プロパティのデフォルトはautoですから

ところでされたいことが、つかめないのですが、
tdがひとつしかないときは、tableの巾は？
tdが、二つのときは、tableの巾は？　170px×2 = 340px ＜ 300px（div巾)
tdが、さらに大きいときは？

そもそも、なぜ oveflow:hiddenでなければならないか？？、それじゃ内容が見えなくなりますけど・・

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
tdが２つなら、170px * 2 でtableのwidthは340pxになってほしいです。
overflow:hiddenとしていますが、別途スクロールバーを配置するので、
それでスクロールして見えるようにします。

要は、Excelの「ウィンドウ枠を固定」のような、「ヘッダ列」と「ヘッダ行」を持つ表を作りたいのです。
これをするにはtableを2x2で4つ並べて、スクロールをJavaScriptで制御する必要があります。
これはoverflow:scrollでは実現できないので、overflow:hiddenを使っています。

通報する

お礼日時：2012/04/27 19:13

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！