![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
Safariです(ちなみに見ているバージョンは4)
<table>
<tr>
<td></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
</tr>
</table>
このような、片方が結合しているテーブルで、
隣のセルの高さを均等にしたいのです。
ほかのブラウザでは良いのですが、
Safariだとどうしても上が短く、下が長くなってしまいます…
CSS等で均等にできないでしょうか??
試しにheight:50%;にしましたがなりませんでした。
![「Safariでテーブルのセルの高さを均等」の質問画像](http://oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/f/476824_5497d7c3dec3b/M.jpg)
No.1ベストアンサー
- 回答日時:
> 試しにheight:50%;にしましたがなりませんでした。
この場合、考えなければいけないのは”50%”というのは「どこの高さに対する”50%”なのか?」という事です。
例えば2000円の品物がセールで「50%OFF!」と銘打ってあったら、2000×0.5=1000、で1000円という値が出ます。しかし、元値が書いてなかったらいくらになるのかわからないですよね?それと同じ事が言えます。ただ、漠然とtdだけに%だけ指定しても、実際にはどの様な描画領域になるのかわからない状態になります。
下記の様な簡単なサンプルで検証してみました。
【HTML】
<table class="hoge" cellspacing="0" cellpadding="0" border="1" summary="概要">
<tr>
<td class="data">上のセル</td>
<td rowspan="2">結合セル</td>
</tr>
<tr>
<td class="data">下のセル(データ量は上のセルより多い)</td>
</tr>
</table>
【CSS】
table.hoge td.data {
width: 100px;
height: 50%;
}
で、更にCSSには
【A】
table.hoge {
width: 200px;
height: 100px;
}
というtableのスタイルが設定されているとします。
この場合、tableの高さ100pxに対して、行が2行でそれぞれのセルの高さが50%、というと100px×0.5=50pxという事で計算が合うので、大抵のブラウザ(Safariは4ではなく3しかないですが)では均等に見えていると思います。無論ですが、3行以上だったら均等にはなりません。
#ただし、セルの中のデータの相対量が結果として50pxを超える場合は、無視してセルの高さをデータが収まりきるまで伸ばします。
#これは変え様がありません。tableのtd要素におけるheightとは、表のセルという性質上、min-height(最低限の高さを保証し、データ量がそれを超える場合は自動的に伸びる)と同じ挙動になるからです。
ですが、この指定が
【B】
table.hoge {
width: 200px;
height: 100%;
}
となっていたら、【A】とは異なり、tdの高さは完全に内包するデータ量で成り行きになります。この場合のtableのheight: 100%;というのは何も指定していない時と同じ(厳密に言うと、一部の環境・条件下ではその限りではないのですが、そこはややこしくなるので無視しておきます。)、セルの内容の量に応じて自動で伸縮するからです。子要素(td)の高さに親要素(table)の高さが依存しています。
ちなみに、この問題は先の質問(質問番号:5087743)のNo.3様のご回答のでJavaScriptを使う事で解決したのではなかったのですか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルのヘッダとボディの幅...
-
CSSだけで<table>の<td>や<tr>...
-
中に<table></table>が使えるア...
-
TRタグの余白をcssで設定するには
-
テーブルの行を折りたたみたい...
-
表の一部を結合するには?
-
tableにul,または,olを入れられ...
-
<COLGROUP>の使い方が理解でき...
-
表の1列だけをCSSを使って右揃...
-
エクセルをhtml変換した、html...
-
POSTによるファイル・アッ...
-
tableレイアウトをcssで軽くで...
-
テーブルの行の高さを指定する...
-
テーブルの任意の列を非表示に...
-
dreamweaverで本文を2段組にす...
-
HTMLで文とテーブルの間が空く。
-
ホームページにのせる表(内側...
-
cssで、表示されるテキストによ...
-
HTMLのテーブルで桁をそろ...
-
特定のテーブルのみ枠線の色を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
tableにul,または,olを入れられ...
-
テーブルの行を折りたたみたい...
-
TRタグの余白をcssで設定するには
-
cssで、表示されるテキストによ...
-
テーブルのヘッダとボディの幅...
-
テーブルの任意の列を非表示に...
-
中に<table></table>が使えるア...
-
HTMLのテーブルで桁をそろ...
-
HTML <td></td>タグ セル内余...
-
文字列が入っているtdを削除せ...
-
テーブルのセルに画像をピッタ...
-
ホームページ 表の上の余白を...
-
逆L字の表(table)組み
-
スタイルシートで colspan=3と...
-
テーブルタグのセルの幅の一部...
-
テーブルの行の高さを指定する...
-
テーブルのセルにアンカー
-
表の1列だけをCSSを使って右揃...
-
テーブルの装飾
-
tableでcolspanを使うと次行以...
おすすめ情報