C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

tableでrowspanした時のブラウザ表示の違い

[トピック内 2 記事 (1 - 2 表示)]  << 0 >>

■100620 / inTopicNo.1)  tableでrowspanした時のブラウザ表示の違い
  
□投稿者/ ピーター (1回)-(2022/09/30(Fri) 16:42:07)

分類:[HTML/CSS] 

3列のtableで、一部の行の3列目をrowspan="2"で結合しています。
この結合したセル(という表現が良いのか分かりませんが)には
5行くらいのテキストがあります。

このtableをWindowsのブラウザ(Chrom・FireFox)で見ると
この結合セルを含む行の非結合セルの高さは
結合セルの高さを均等割りしたような感じになっていました。

ただ、僕のiPhoneのChromeやSafariでこのページを見ると
上記非結合セルの上段側の高さが1行分、
下段側の高さが結合セル高さの残り、のような感じになっていました。

iPhoneでの表示も均等割表示にしたいのですが、
どうすればよいのでしょうか?
引用返信 編集キー/
■100640 / inTopicNo.2)  Re[1]: tableでrowspanした時のブラウザ表示の違い
□投稿者/ ピーター (2回)-(2022/10/04(Tue) 14:02:30)
2022/10/04(Tue) 14:03:11 編集(投稿者)

自己レスです。
とりあえず、JavaScriptを使用して、以下の方法で実現はできました。
(1)結合セルの高さを取得(対象tdのoffsetHeight)
(2)上記(1)で取得した高さを2で割る
(3)上記(2)で得られた値を利用して非結合セルの高さを設定
  (対象tdのstyle.height = (2)の値 + 'px';)

でも、わざわざJavaScriptで計算せずとも、cssで何とかできないものでしょうか?
もしご存知の方がいらっしゃったらアドバイスお願いします。
引用返信 編集キー/

このトピックをツリーで一括表示


トピック内ページ移動 / << 0 >>

このトピックに書きこむ