如何打印一行4個單元格下的3個相同大小的單元格？ HTML

Question

下不會達到的效果

<tr><td colspan="4">Title</td></tr> 
<tr><td>1</td><td>1</td><td>1</td><td>1</td></tr> 
<tr><td width="33.33%">1</td><td width="33.33%">2</td><td width="33.33%">3</td></tr> 
<tr><td width="33.33%">&nbsp;</td><td width="33.33%"></td><td width="33.33%"></td></tr> 

的還有第三個單元之後將考慮到第4列的額外空間。我怎樣才能刪除這個，以便整行被平均分成三個單元格來填充它？

Answer 1

對於寬度相等，你應該創建2個表是這樣的：

<table> 
    <tr><td colspan="4">Title</td></tr> 
    <tr> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
    </tr> 
</table> 

<table> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
    </tr> 
</table> 

這裏是小提琴：http://jsfiddle.net/Q57gW/2/

Answer 2

最好的答案是不使用表格。如果你真的需要那張表，一個（非常混亂）的靈魂可能是每行有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%; 
}