ブラウザによってテーブルのセルの高さが変わる

質問

質問させて頂きます。

現在、テーブルを使用して表を作っているのですが、
ブラウザによってセルの高さが変わってしまいます。

safariでは思った通りのレイアウトになるのですが、
chrome、Firefoxでは [ height ] の値が反映されていないのか、
崩れてしまいます。

添付は希望するレイアウト（safariではこのように表示されます）です。

ソースを記載しますので、どなたかご教示お願い致します。

--- html ---

<table class="hogs" cellspacing="5">
<tr>
<td width="180" height="184" rowspan="3"><img src="img/001.gif" width="180" height="184" alt=""/></td>
<th height="22">項目１</th>
<td>文章１</td>
</tr>
<tr>
<th height="22">項目２</th><td height="22">文章２</td>
</tr>
<tr>
<th height="140" valign="top">項目３</th><td valign="top">文章３</td>
</tr>
</table>

--- 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;
}

回答No.3

ORUKA1951 · ベストアンサー

スタイルシートでの指定・・
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 )

　なお、
<table summary="目次" border="1">
　　<tbody><!-- ひとつしかないときはなくてよい -->
　　　<tr>
　　　　<td rowspan="3"><img src="img/001.gif" width="180" height="184" alt=""/></td>
　　　　<th abbr="項目1">項目１</th>
　　　　<td>文章１</td>
　　　</tr>
　　　<tr>
　　　　<th>項目２</th><td>文章２</td>
　　　</tr>
　　　<tr>
　　　　<th>項目３</th>
　　　　<td>文章３</td>
　　　</tr>
　　</tr>
　</tbody>
</table>
[スタイルシート]
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 )

なお、こちらのほうが良いと思う。
<dl>
　<dt>項目1</dt>
　<dd>文章1</dd>
　<dt>項目2</dt>
　<dd>文章2</dd>
　<dt>項目3</dt>
　<dd>文章3</dd>
</dl>

お礼

まだまだ初心者なもので、
カスケーディングや詳細度という言葉は初めて知りました。
もっと勉強しようと思います。

ありがとうございました！

回答No.2

SortaNerd

3つのthに同じ高さを指定しているのですから同じ高さになって不思議はありません。

table.hoge th {
height: 22px;
}

3つ目だけ高さを変えたいのなら、3つ目だけ別の指定にすればよいでしょう。

お礼

ご回答ありがとうございます。
ここだったんですね、やってみます！

回答No.1

pasocom

あらゆるHTMLにおいて、ピクセルで数値を指定したい場合は
"1000"　ではなく、1000px　と書く方が確実ですよ。（引用符は不要）

この場合、CSSでは正しく書いていますが、HTMLの方の"184"が優先されているのでしょう。

お礼

ご回答ありがとうございます。
px表記にしても、HTMLの方の記述を消してみてもダメでした。。

３つの<tr>が全部同じ高さになっています。。。