![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
質問させて頂きます。
現在、テーブルを使用して表を作っているのですが、
ブラウザによってセルの高さが変わってしまいます。
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">項目1</th>
<td>文章1</td>
</tr>
<tr>
<th height="22">項目2</th><td height="22">文章2</td>
</tr>
<tr>
<th height="140" valign="top">項目3</th><td valign="top">文章3</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;
}
![「ブラウザによってテーブルのセルの高さが変」の質問画像](http://oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/6/444147963_5497c2c115447/M.jpg)
No.3ベストアンサー
- 回答日時:
スタイルシートでの指定・・
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-html4 … )
⇒6.4.3 セレクタの詳細度を計算する ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
⇒6.4.4 非CSSの見栄えヒントの優先順位 ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
なお、
<table summary="目次" border="1">
<tbody><!-- ひとつしかないときはなくてよい -->
<tr>
<td rowspan="3"><img src="img/001.gif" width="180" height="184" alt=""/></td>
<th abbr="項目1">項目1</th>
<td>文章1</td>
</tr>
<tr>
<th>項目2</th><td>文章2</td>
</tr>
<tr>
<th>項目3</th>
<td>文章3</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/CSS … )
6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
なお、こちらのほうが良いと思う。
<dl>
<dt>項目1</dt>
<dd>文章1</dd>
<dt>項目2</dt>
<dd>文章2</dd>
<dt>項目3</dt>
<dd>文章3</dd>
</dl>
まだまだ初心者なもので、
カスケーディングや詳細度という言葉は初めて知りました。
もっと勉強しようと思います。
ありがとうございました!
No.2
- 回答日時:
3つのthに同じ高さを指定しているのですから同じ高さになって不思議はありません。
table.hoge th {
height: 22px;
}
3つ目だけ高さを変えたいのなら、3つ目だけ別の指定にすればよいでしょう。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
tableタグとformタグの組み合わせ
-
html でのテキスト結合について
-
テーブルの一部分のセルだけに...
-
vbscriptで時計を作りたい
-
前の質問のソースです
-
Tableタグで作成した表の縮小
-
同じクラス名はつけないほうが...
-
td要素内のdiv要素をセンタリン...
-
リストの記号を括弧付きの文字...
-
cssで、テーブルのtdの中の文字...
-
tableタグの中にtableタグ
-
tableがbodyにはみ出る。。
-
CSSでテーブルを中央にする方法
-
自身のHPにYouTube動画を貼り付...
-
インラインフレームの表示方法
-
セルを結合してもCSSで設定した...
-
<BODY>~</BODY> の中に <STYLE...
-
テーブル内のテーブルの高さを...
-
テーブルタグの中にdivを含めて...
-
<th>タグを使っても太字にしな...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
tableタグとformタグの組み合わせ
-
html でのテキスト結合について
-
テーブルの一部分のセルだけに...
-
同じクラス名はつけないほうが...
-
XHTMLに関する質問 順序が逆に...
-
Tableタグ内のspan styleが適応...
-
Tableタグで作成した表の縮小
-
divで囲んだ文字が消える
-
formのinputなどの幅100%指定
-
td要素内のdiv要素をセンタリン...
-
cssで、テーブルのtdの中の文字...
-
表とリスト(ulとtable)の違い...
-
Dreamweaver デザインビューの...
-
<img>タグにCSSのclass設定可能?
-
trとtrの間
-
Firefoxを使ってるのですがズー...
-
ブラウザによってテーブルのセ...
-
td width="180" と固定してるの...
-
vbscriptで時計を作りたい
-
テーブル内のテーブルの高さを...
おすすめ情報