我有一個5列的表。最後一行應該有兩個單元,間隔相等。Colspan跨越2.5列?
理想情況下,我想使用<td colspan="2.5">
- 最優雅的方法是什麼?
該表有1邊框,所以使用
<td colspan=2">abc</td>
<td></td>
<td colspan=2">def</td>
長相醜陋
我有一個5列的表。最後一行應該有兩個單元,間隔相等。Colspan跨越2.5列?
理想情況下,我想使用<td colspan="2.5">
- 最優雅的方法是什麼?
該表有1邊框,所以使用
<td colspan=2">abc</td>
<td></td>
<td colspan=2">def</td>
長相醜陋
你真的需要下排兩個表格單元格或僅僅兩個街區是整行寬度的一半?如果是後者,那麼你可以做一個<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/
嘗試是這樣的
<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效果不錯。
+1對於古老的桌子設計! :-)雖然這些東西變得相當難以理解,但它們仍然是... – 2011-02-14 08:29:47
這似乎很好地工作(在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>
如何其複雜的更改爲div的底座設計,而不是表 – 2011-02-14 07:44:11
+1一個有效點,雖然這只是一些小的日落是叫「表」給我,我仍然會重新考慮它。謝謝 – Mawg 2011-02-19 23:26:10
爲什麼我不把它做成10列和雙重一切?哦,哦! – Mawg 2017-11-05 17:58:17