質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

567閲覧

Tableレイアウトでrowspanで結合すると行がなくなるのですが良い解決方法はないでしょうか?

no1knows

総合スコア3365

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2023/01/23 01:28

編集2023/01/23 16:13

前提

下記の赤い箇所をrowspan="2"にすると1行なくなってしまいました。
これを解決する方法はありますか?
イメージ説明    ↓ rowspan="2"を追加
イメージ説明

該当のソースコードと試したこと

まず手元で実行したところ1行なくなってしまって、オンラインサービスでも確認しましたが、同様の結果となってしまいました。

https://tabletag.net/ja/

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>

コードシェアサービスで確認できるようにしました!

https://codepen.io/zilchr/pen/bGjLRWa

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2023/01/23 01:36

検索して調べてみたことはありますか?
hoshi-takanori

2023/01/23 01:39

rowspan="2" のところの高さを増やすといいかも。(<br> で改行するとか)
no1knows

2023/01/23 01:40

はい!「HTML table rowspan 行がなくなる」などで検索はしてみたのですが、適切なキーワードではないようで該当の解決方法は見つかっていません。。。
no1knows

2023/01/23 01:55

brで改行してもだめでした。また動作を確認いただけるようにcodepenを追加しました!
hoshi-takanori

2023/01/23 02:00

<td rowspan="2">4~150<br>x</td> にしたら変わったよ。(<br> の後ろに何もないと無視されるかも。)
m.ts10806

2023/01/23 02:02

結局どういう形にしたいのか大目的から手段を探ったほうが良いような。 手段から手段探っても遠回りしてるだけに思います。
hoshi-takanori

2023/01/23 02:21

目的はそういう表を組みたいってことですよね。うまく言語化できないけど、自分も以前はまったから分かります。 セルの中身がないと高さが潰れて、rowspan=2 でも rowspan=1 と同じになってしまうので、明示的に高さを指定するか、高さの異なる中身を入れる必要があります。 参考。 https://graphicdesign.stackexchange.com/questions/118113/rowspan-in-the-last-row-of-the-table-with-css-and-without-css
no1knows

2023/01/23 02:29

はい、前提の赤い箇所を結合した表を組みたいです。 リンク確認してみます!
maisumakun

2023/01/23 02:49

Tableレイアウトとありますが、表を組みたいのでなければgridレイアウトを使ったほうがいいでしょう。 (「Tableレイアウト」に「<table>を表組みでないレイアウト目的に使う」という意味もあります)
no1knows

2023/01/23 07:13

ありがとうございます! gridレイアウト、この機会にきちんと学習してみたいと思います!
guest

回答1

0

ベストアンサー

どこにもrowspanが1になる行が存在しないわけですからそれは無理です。
そういう表をつくってはいけません。
どうしてもということであればダミーのセルを一番うしろにつけて線をひかないことです

HTML

1<style> 2table{border-collapse:collapse;} 3td:not(:last-child){border:solid 1px black;;} 4</style> 5<table> 6<tbody> 7<tr> 8<td rowspan="4">&nbsp;</td> 9<td>&nbsp;</td> 10<td>&nbsp;</td> 11<td>&nbsp;</td> 12<td>&nbsp;</td> 13</tr> 14<tr> 15<td rowspan="2"></td> 16<td>&nbsp;</td> 17<td rowspan="2">&nbsp;</td> 18<td>&nbsp;</td> 19</tr> 20<tr> 21<td rowspan="2">&nbsp;</td> 22<td>&nbsp;</td> 23</tr> 24<tr> 25<td>&nbsp;</td> 26<td>&nbsp;</td> 27<td>&nbsp;</td> 28</tr> 29</tbody> 30</table>

投稿2023/01/23 02:46

yambejp

総合スコア114581

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

no1knows

2023/01/23 07:13

> どこにもrowspanが1になる行が存在しない なるほど!こういうことだったんですね! またシンプルな解決策もありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問