AnswerBun.com

display:block;でセルを横並びにしたい

スタック・オーバーフロー Asked by denden on October 27, 2020

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>

画像の説明をここに入力

One Answer

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

<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を追加すればいけると思います

Correct answer by keitaro_so on October 27, 2020

Add your own answers!

Related Questions

java 球体を表すBallクラス

1  Asked on December 23, 2021 by tata

 

Android サーバーでのレシート検証について

1  Asked on December 23, 2021 by tom-marvolo-riddle

 

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP, SolveDir