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

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>

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