- ベストアンサー
テーブルタグにheight要素
少し疑問なので質問です。 テーブルタグにheight要素が適用されない場合というのは、 どういう場合がありますでしょうか？ 現在、テーブルを弄っているのですが、 なぜかテーブルタグにheightが適用されません。 一定の大きさ以上にはなるのですが、 それ以下の大きさには設定できない状態です。 例えば、300pxが基のサイズだとして、 それより大きくはできるのですが、小さくは出来ないのです。 CSSで適用しても同様の結果が得られました。 何か理由があるのでしょうか？
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
再現しました。テストケースを示します。(解決策ではありません) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>実験</title> <style type="text/css"> table,p{ width:70%; } .menu1{ table-layout:fixed; background-color:red; height:100px; } .menu2{ table-layout:fixed; background-color:yellow; height:30px; } .menu3{ table-layout:fixed; background-color:green; height:5px; } .menu4{ table-layout:fixed; background-color:green; height:1000px; } </style> </head> <body> <table class="menu1"> <caption>メニュー</caption> <thead> <tr><th>料理</th><th>値段</th></tr> </thead> <tbody> <tr><td>豚肉定食</td><td>800</td></tr> <tr><td>鶏肉定食</td><td>1000</td></tr> <tr><td>牛肉定食</td><td>1200</td></tr> </tbody> </table> <p class="menu1">ほげふが</p> <table class="menu2"> <caption>メニュー</caption> <thead> <tr><th>料理</th><th>値段</th></tr> </thead> <tbody> <tr><td>豚肉定食</td><td>800</td></tr> <tr><td>鶏肉定食</td><td>1000</td></tr> <tr><td>牛肉定食</td><td>1200</td></tr> </tbody> </table> <p class="menu2">ほげふが</p> <table class="menu3"> <caption>メニュー</caption> <thead> <tr><th>料理</th><th>値段</th></tr> </thead> <tbody> <tr><td>豚肉定食</td><td>800</td></tr> <tr><td>鶏肉定食</td><td>1000</td></tr> <tr><td>牛肉定食</td><td>1200</td></tr> </tbody> </table> <p class="menu3">ほげふが</p> <table class="menu4"> <caption>メニュー</caption> <thead> <tr><th>料理</th><th>値段</th></tr> </thead> <tbody> <tr><td>豚肉定食</td><td>800</td></tr> <tr><td>鶏肉定食</td><td>1000</td></tr> <tr><td>牛肉定食</td><td>1200</td></tr> </tbody> </table> <p class="menu4">ほげふが</p> <p><a href="http://www.y-adagio.com/public/standards/tr_css2/tables.html#height-layout "> CSS2 17.5.3 表の高さのアルゴリズム</a>では以下のようになっている。</p> <blockquote> <p> 表の高さは，'table'要素又は'inline-table'要素の'height' 特性によって提供される。 'auto'という値は，高さが行の高さにあらゆるセル間スペース又は境界を加味した合計であることを意味する。 その他の値はいずれも高さを明示的に指定する。 従って，表はその行の高さよりも高くてもよいし，低くてもよい。 <strong>CSS2は，指定された表の高さが内容の高さとは異なる場合，レンダリングを指定しない。 特に内容の高さが指定された高さを上書きするのがよいかどうか， 上書きしない場合，指定された表の高さに合わせて余ったスペースを行にどのように分配するのがよいか， 内容の高さが指定された表の高さを超える場合，UAがスクロール機構を提供するのがよいか，を指定しない。 </strong> </p> </blockquote> </body> </html>
その他の回答 (2)
- himajin100000
- ベストアンサー率54% (1660/3060)
ところで、 >テーブルタグにheight要素 table【要素】にheight【属性】ね 全然違うので注意。(ま、タグに属性、は場合によっては許せるかな)
- steel_gray
- ベストアンサー率66% (1052/1578)
とりあえずHTMLの仕様上、（thやtdにはありますが） tableのheight属性は正式には存在しないので 使わないようにするのが基本です。 一定以上にはなるが、一定以下にはならないという状況はよくわかりません。 ＞例えば、300pxが基のサイズだとして、それより大きくはできるのですが、小さくは出来ないのです。 何が基？ 無指定で内容物でそれぐらいの高さがあるとして それより小さくしたいとしたら、どういう表示結果を望んでいるのでしょう？ （ハミでる分を隠す？スクロールバーを出す？？）
補足
tableのheightは無い・・・ですか。 初めて知りました。勉強になります。 無指定で300pxくらいです。 表示結果としては、単純にtableを縮小したいだけです。 それでheightを使っていたのですが、大きくはなりますが小さくならない状況です。 小さくならない＝無指定の状態より小さくならないということです。