0

display:block;同士横並びにしたい
上記で回答いただきましたが、今度はセルが多くなったときに画像のようにtd2とtd3を横並びにしたいのですがどのようにしたらいいでしょうか?
現状では下記コードで図の上のような形になってしまいます、図の下のようにしたいです。

HTML

<td>
    <table>
    <thead>
<tr>
    <th id="th1">1</th>
    <th id="th2">2</th>
    <th id="th3">3</th>
    <th id="th4">4</th>
</tr>
</thead>

<tr>
<td class = "td1">aaa</td>

<td class = "td2">bbb</td>
<td class = "td2">bbb</td>
<td class = "td2">bbb</td>

<td class = "td3">ccc</td>
<td class = "td3">ccc</td>
<td class = "td3">ccc</td>

<td class = "td4">ddd</td>
</tr>

CSS

td.td2{display:block;}
td.td3{display:block;}

画像の説明をここに入力

[補足]
rowspanを使用して試してみましたが、下図のようにaaaの下にcccがきてしまいました。
cccをbbbの右となりにもっていきたいです。

HTML

<table border="3">
<tr>
<td rowspan="3">aaa</td>
<td>bbb</td>
</tr>
<tr>
<td>bbb</td>
</tr>
<tr>
<td>bbb</td>
</tr>
<tr>
<td>ccc</td>
</tr>
<tr>
<td>ccc</td>
</tr>
<tr>
<td>ccc</td>
</tr>
</table>

画像の説明をここに入力

2
  • 前提の話で恐縮なんですがCSSではなくてHTMLの作りを変えてテーブルの組み方変更するという方法では難しいのでしょうか?セルの結合で実装すればきれいに表示されるとは思いますが、、
    – keitaro_so
    Commented 2020年9月23日 4:11
  • 補足として質問に編集追加しました。セルの結合を使用してみましたが、一部うまくいきませんでした。
    – denden
    Commented 2020年9月23日 6:56

1 件の回答 1

0

セルの結合でよろしければ以下の感じの結合の方式でいかがでしょうか?

<table border="3">
  <tr>
    <td rowspan="3">aaa</td>
    <td>bbb</td>
    <td>ccc</td>
  </tr>
  <tr>
    <td>bbb</td>
    <td>ccc</td>
  </tr>
  <tr>
    <td>bbb</td>
    <td>ccc</td>
  </tr>
</table>

trは横の軸を表現するので最初の軸をaaa,bbb,cccを表示しておいてaaaにrowspanを全体の行数分追加しておきます。

あとは行数分bbbとcccを追加すればいけると思います

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。