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


[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)




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

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




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

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

