最好的答案是不使用表格。如果你真的需要那張表,一個(非常混亂)的靈魂可能是每行有12列,第一行有colspan =「3」,其他行有colspan =「4」。
jsfiddle link for this solution
<table><tbody>
<tr>
<td style="border: 1px solid #333; width: 240px;" colspan="12">Title</td>
</tr>
<tr>
<td style="border: 1px solid #333; width: 60px;" colspan="3">1</td>
<td style="border: 1px solid #333; width: 60px;" colspan="3">1</td>
<td style="border: 1px solid #333; width: 60px;" colspan="3">1</td>
<td style="border: 1px solid #333; width: 60px;" colspan="3">1</td>
</tr>
<tr>
<td style="border: 1px solid #333; width: 80px;" colspan="4">1</td>
<td style="border: 1px solid #333; width: 80px;" colspan="4">2</td>
<td style="border: 1px solid #333; width: 80px;" colspan="4">3</td>
</tr>
</tbody></table>
但我嚴重建議你用的div或跨度或東西比表格單元格別的。這裏有一個好得多的解決方案使用的段落:
jsfiddle link
HTML:
<div style="width: 240px;">
<p class="onecell">Title</p>
<p class="fourcell">1</p><p class="fourcell">1</p><p class="fourcell">1</p><p class="fourcell">1</p>
<p class="threecell">1</p><p class="threecell">2</p><p class="threecell">3</p>
</div>
CSS:
p {
float: left;
border: 1px solid #333;
box-sizing: border-box;
padding: 0;
margin: 0;
}
p.onecell {
width: 100%;
}
p.fourcell {
width: 25%;
}
p.threecell {
width: 33%;
}