前提
下記の赤い箇所をrowspan="2"にすると1行なくなってしまいました。
これを解決する方法はありますか?
↓ rowspan="2"を追加
該当のソースコードと試したこと
まず手元で実行したところ1行なくなってしまって、オンラインサービスでも確認しましたが、同様の結果となってしまいました。
html
1<table> 2 <tbody> 3 <tr> 4 <td rowspan="4"></td> 5 <td></td> 6 <td></td> 7 <td></td> 8 </tr> 9 <tr> 10 <td rowspan="2"></td> 11 <td></td> 12 <td></td><!-- ここをrowspan="2"に変更したい --> 13 </tr> 14 <tr> 15 <td rowspan="2"></td> 16 <td></td> 17 </tr> 18 <tr> 19 <td></td> 20 <td></td> 21 </tr> 22 </tbody> 23</table>
コードシェアサービスで確認できるようにしました!
検索して調べてみたことはありますか?
rowspan="2" のところの高さを増やすといいかも。(<br> で改行するとか)
はい!「HTML table rowspan 行がなくなる」などで検索はしてみたのですが、適切なキーワードではないようで該当の解決方法は見つかっていません。。。
brで改行してもだめでした。また動作を確認いただけるようにcodepenを追加しました!
<td rowspan="2">4~150<br>x</td> にしたら変わったよ。(<br> の後ろに何もないと無視されるかも。)
結局どういう形にしたいのか大目的から手段を探ったほうが良いような。
手段から手段探っても遠回りしてるだけに思います。
目的はそういう表を組みたいってことですよね。うまく言語化できないけど、自分も以前はまったから分かります。
セルの中身がないと高さが潰れて、rowspan=2 でも rowspan=1 と同じになってしまうので、明示的に高さを指定するか、高さの異なる中身を入れる必要があります。
参考。
https://graphicdesign.stackexchange.com/questions/118113/rowspan-in-the-last-row-of-the-table-with-css-and-without-css
はい、前提の赤い箇所を結合した表を組みたいです。
リンク確認してみます!
Tableレイアウトとありますが、表を組みたいのでなければgridレイアウトを使ったほうがいいでしょう。
(「Tableレイアウト」に「<table>を表組みでないレイアウト目的に使う」という意味もあります)
ありがとうございます!
gridレイアウト、この機会にきちんと学習してみたいと思います!
回答1件
あなたの回答
tips
プレビュー