Safariです(ちなみに見ているバージョンは4)
<table>
<tr>
<td></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
</tr>
</table>
このような、片方が結合しているテーブルで、
隣のセルの高さを均等にしたいのです。
ほかのブラウザでは良いのですが、
Safariだとどうしても上が短く、下が長くなってしまいます…
CSS等で均等にできないでしょうか??
試しにheight:50%;にしましたがなりませんでした。
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で質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- MySQL SQL任意に並び替えをしたい 2 2023/08/28 10:47
- Perl PERL 1 2022/04/26 14:15
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
tableにul,または,olを入れられ...
-
テーブルの表示がずれます
-
不要な余白を削除する方法を教...
-
テーブルのヘッダとボディの幅...
-
TRタグの余白をcssで設定するには
-
テーブル(表)を2つ横に並べて...
-
テーブルの外側の線を消す
-
テーブルの任意の列を非表示に...
-
逆L字の表(table)組み
-
EXCELからhtmlへの変換で罫線が...
-
テーブルの枠が2重線になるので
-
[CSS] tableの行の間隔をあける
-
テーブルの行を折りたたみたい...
-
テーブルタグのセルの幅の一部...
-
テーブルの行の高さを指定する...
-
HTML <td></td>タグ セル内余...
-
EXCELの表にTABLEタグをテキス...
-
<table>を複数使用するレイアウ...
-
tableでcolspanを使うと次行以...
-
EXCELのセル内にHTMLタグを含む...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
TRタグの余白をcssで設定するには
-
tableにul,または,olを入れられ...
-
テーブルの任意の列を非表示に...
-
テーブルのヘッダとボディの幅...
-
cssで、表示されるテキストによ...
-
HTML <td></td>タグ セル内余...
-
文字列が入っているtdを削除せ...
-
テーブルのセルに画像をピッタ...
-
テーブルの行を折りたたみたい...
-
テーブルの行の高さを指定する...
-
テーブルの表示がずれます
-
テーブルタグのセルの幅の一部...
-
中に<table></table>が使えるア...
-
逆L字の表(table)組み
-
ホームページ 表の上の余白を...
-
表の中の列の順番を入れ替える...
-
EXCELからhtmlへの変換で罫線が...
-
tableでcolspanを使うと次行以...
-
表の1列だけをCSSを使って右揃...
-
文字の中央そろえを一括で指定...
おすすめ情報