2011-02-14 118 views
7

我有一個5列的表。最後一行應該有兩個單元,間隔相等。Colspan跨越2.5列?

理想情況下,我想使用<td colspan="2.5"> - 最優雅的方法是什麼?

該表有1邊框,所以使用

<td colspan=2">abc</td> 
<td></td> 
<td colspan=2">def</td> 

長相醜陋

+1

如何其複雜的更改爲div的底座設計,而不是表 – 2011-02-14 07:44:11

+0

+1一個有效點,雖然這只是一些小的日落是叫「表」給我,我仍然會重新考慮它。謝謝 – Mawg 2011-02-19 23:26:10

+0

爲什麼我不把它做成10列和雙重一切?哦,哦! – Mawg 2017-11-05 17:58:17

回答

13

你真的需要下排兩個表格單元格或僅僅兩個街區是整行寬度的一半?如果是後者,那麼你可以做一個<td colspan="5">的最後一行,將兩個<div>,它出現,浮動一個向左,另一個向右,並給他們width:50%

<table> 
    <tbody> 
     <tr> 
      <td>1111</td> 
      <td>2222</td> 
      <td>3333</td> 
      <td>4444</td> 
      <td>5555</td> 
     </tr> 
     <tr> 
      <td colspan="5"> 
       <div class="first-half"> 
        half 
       </div> 
       <div class="second-half"> 
        half 
       </div> 
      </td> 
     </tr> 
    </tbody> 
</table> 

和一些CSS:

.first-half { 
    float: left; 
    width: 50%; 
} 
.second-half { 
    float: right; 
    width: 50%; 
} 

和平常的jsfiddle:http://jsfiddle.net/ambiguous/mmZEa/

如果你需要他們的表格單元格,那麼你可能會增加一倍水平細胞的數目,使所有現有的<td colspan="2">,然後用<td colspan="5" width="50%">兩個小區在最後一行:http://jsfiddle.net/ambiguous/JzrLK/

14

嘗試是這樣的

<table border="1"> 
    <tr> 
     <td>text</td> 
     <td>text</td> 
     <td colspan="2">text</td> 
     <td>text</td> 
     <td>text</td> 
    </tr> 
    <tr> 
     <td>text</td> 
     <td>text</td> 
     <td colspan="2">text</td> 
     <td>text</td> 
     <td>text</td> 
    </tr> 
    <tr> 
     <td>text</td> 
     <td>text</td> 
     <td colspan="2">text</td> 
     <td>text</td> 
     <td>text</td> 
    </tr> 
    <tr> 
     <td colspan="3">text</td> 
     <td colspan="3">text</td> 
    </tr> 
</table> 

在Chrome,火狐和IE 7-9效果不錯。

見琴:https://jsfiddle.net/weyy601z/

+1

+1對於古老的桌子設計! :-)雖然這些東西變得相當難以理解,但它們仍然是... – 2011-02-14 08:29:47

2

這似乎很好地工作(在Chrome,IE和Firefox測試):

<table border="0" CELLPADDING="0" CELLSPACING="0"> 
<tr> 
    <td> 
     <table border="1" width="100%"> 
      <tr> 
       <td>abcsss</td> 
       <td>sdf</td> 
       <td>def</td> 
       <td>def</td> 
       <td>defsssss</td> 
      </tr> 
     </table> 
    <td> 
</tr> 
<tr> 
    <td> 
     <table border="1" width="100%"> 
      <tr> 
       <td width="50%">test</td> 
       <td width="50%">test</td> 
      </tr> 
     </table> 
    </td> 
</tr> 
</table>