
質問させて頂きます。
現在、テーブルを使用して表を作っているのですが、
ブラウザによってセルの高さが変わってしまいます。
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;
}

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ランキング
-
cssで、テーブルのtdの中の文字...
-
html でのテキスト結合について
-
vbscriptで時計を作りたい
-
CSSで空けた文頭の全角スペース...
-
XHTMLに関する質問 順序が逆に...
-
Dreamweaver デザインビューの...
-
<img>タグにCSSのclass設定可能?
-
固定ヘッダーがある時のページ...
-
tableタグとformタグの組み合わせ
-
特殊文字の検索方法
-
vb2005でwebbrowserに表示した...
-
テーブルのセル内の隙間を取れ...
-
テーブルタグの中にdivを含めて...
-
テーブルのヘッダとボディの幅...
-
CSSで特定のテーブルだけに...
-
テーブルの行を折りたたみたい...
-
TRタグの余白をcssで設定するには
-
テーブルの任意の列を非表示に...
-
TABLEのセルの中の文字を行単位...
-
tableにul,または,olを入れられ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
tableタグとformタグの組み合わせ
-
html でのテキスト結合について
-
テーブルの一部分のセルだけに...
-
<img>タグにCSSのclass設定可能?
-
XHTMLに関する質問 順序が逆に...
-
vbscriptで時計を作りたい
-
cssで、テーブルのtdの中の文字...
-
表とリスト(ulとtable)の違い...
-
htmlのボタンを左寄席にしたい
-
trとtrの間
-
divで囲んだ文字が消える
-
td要素内のdiv要素をセンタリン...
-
商品一覧をtableタグで表示する
-
同じクラス名はつけないほうが...
-
入れ子にしたテーブルをheight1...
-
<BODY>~</BODY> の中に <STYLE...
-
Tableタグで作成した表の縮小
-
Tableタグ内のspan styleが適応...
-
Firefoxを使ってるのですがズー...
-
Visual Studio で CLR 開発でデ...
おすすめ情報