2014-06-05 47 views
-1

下不會達到的效果如何打印一行4個單元格下的3個相同大小的單元格? HTML

<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列的額外空間。我怎樣才能刪除這個,以便整行被平均分成三個單元格來填充它?

回答

0

對於寬度相等,你應該創建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/

0

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