70622


[display:block;同士横並びにしたい](https://ja.stackoverflow.com/questions/70602/displayblock%e5%90%8c%e5%a3%ab%e6%a8%aa%e4%b8%a6%e3%81%b3%e3%81%ab%e3%81%97%e3%81%9f%e3%81%84/70607#70607)  
上記で回答いただきましたが、今度はセルが多くなったときに画像のようにtd2とtd3を横並びにしたいのですがどのようにしたらいいでしょうか？  
現状では下記コードで図の上のような形になってしまいます、図の下のようにしたいです。

**HTML**

[code]

    <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>
    
[/code]

**CSS**

[code]

    td.td2{display:block;}
    td.td3{display:block;}
    
[/code]

[![画像の説明をここに入力](https://i.stack.imgur.com/TOlFz.png)](https://i.stack.imgur.com/TOlFz.png)

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

**HTML**

[code]

    <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>
    
[/code]

[![画像の説明をここに入力](https://i.stack.imgur.com/WbHzn.png)](https://i.stack.imgur.com/WbHzn.png)


CC BY-SA 4.0
2020-09-22T15:26:31.070
70611
2020-09-23T07:04:14.680
2020-09-23T06:55:17.940
10088
10088
question
html css
display:block;でセルを横並びにしたい


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

[code]

    <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>
[/code]

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

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


CC BY-SA 4.0
2020-09-23T07:04:14.680
70622
2020-09-23T07:04:14.680
22665
70611
answer