質問: ブラウザによってテーブルのセルの高さが変わる 質問させて頂きます。 現在、テーブルを使用して表を作っているのですが、 ブラウザによってセルの高さが変わってしまいます。 safariでは思った通りのレイアウトになるのですが、 chrome、firefoxでは [ height ] の値が反映されていないのか、 崩れてしまいます。 添付は希望するレイアウト(safariではこのように表示されます)です。 ソースを記載しますので、どなたかご教示お願い致します。 --- html --- | | | | | --- | --- | --- | | | 項目1 | 文章1 | | 項目2 | 文章2 | | 項目3 | 文章3 | --- css --- table.hoge { background-color: rgba(50,50,50,0.3); width: 640px; height: 184px; margin: 0 auto 18px; padding: 10px; } table.hoge th { height: 22px; background-color: #7ac0c9; width: 80px; } table.hoge td { padding: 0 20px; }
回答: スタイルシートでの指定・・ table.hoge th {height: 22px; この場合は詳細度が[0,0,1,2]ですね。一方ブラウザの属性での指定(height="140")の詳細度は0です。 当然、属性での指定は上書きされます。 ・・・・height="140" 自体は正しいです。単位をつけてはなりません。 ⇒height = length [cn] ( http://www.asahi-net.or.jp/%7esd5a-ucd/rec-html401j/struct/tables.html#adef-height-th ) ⇒6.4.3 セレクタの詳細度を計算する ( http://momdo.s35.xrea.com/web-html-test/spec/css21/cascade.html#specificity ) ⇒6.4.4 非cssの見栄えヒントの優先順位 ( http://momdo.s35.xrea.com/web-html-test/spec/css21/cascade.html#preshint ) なお、 | | 項目1 | 文章1 | | 項目2 | 文章2 | | 項目3 | 文章3 | [スタイルシート] table[summary="目次"]{ border-collapse:separate; background-color: rgba(50,50,50,0.3); width: 640px; height: 184px; margin: 0 auto 18px; padding: 10px; border-spacing:5px 10px; } table[summary="目次"] th{ height: 22px; background-color: #7ac0c9; width: 80px; } table[summary="目次"] td { padding: 0 20px; } カスケーディングや詳細度は、カスケーディングスタイルシートの命ともいえるものです。プロパティより先に確実に身につけないとなりません。 5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/css21/selector.html ) 6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/css21/cascade.html ) なお、こちらのほうが良いと思う。 項目1 文章1 項目2 文章2 項目3 文章3