Html Colspan 跨越 2.5 列？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4989787/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Colspan spanning 2.5 columns?
提问by Mawg says reinstate Monica
I have a table with 5 columns. The final row should have two cells, spaced equally.
我有一个有 5 列的表。最后一行应该有两个单元格，间隔相等。
Ideally, I would like to use <td colspan="2.5">- whats the most elegant way to do this?
理想情况下，我想使用<td colspan="2.5">- 最优雅的方法是什么？
The table has a border of 1, so using
该表的边框为 1，因此使用
<td colspan=2">abc</td>
<td></td>
<td colspan=2">def</td>
looks ugly
看起来很丑
回答by mu is too short
Do you really need two table cells in the bottom row or just two blocks that are half the width of the entire row? If the latter, then you can make a <td colspan="5">for the final row, put two <div>s in it, float one to the left and the other to the right, and give them width:50%:
您真的需要底行中的两个表格单元格，还是只需要整行宽度一半的两个块？如果是后者，那么你可以<td colspan="5">为最后一行做一个，在里面放两个<div>s，一个向左浮动，另一个向右浮动，然后给他们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>
And some CSS:
还有一些CSS：
.first-half {
float: left;
width: 50%;
}
.second-half {
float: right;
width: 50%;
}
And the usual jsfiddle: http://jsfiddle.net/ambiguous/mmZEa/
和通常的 jsfiddle：http: //jsfiddle.net/ambiguous/mmZEa/
If you do need them to be table cells then you could double the number of horizontal cells, make all the existing ones <td colspan="2">, and then use <td colspan="5" width="50%">for the two cells in the bottom row: http://jsfiddle.net/ambiguous/JzrLK/
如果您确实需要它们作为表格单元格，那么您可以将水平单元格的数量加倍，制作所有现有单元格，<td colspan="2">然后<td colspan="5" width="50%">用于底行中的两个单元格：http: //jsfiddle.net/ambiguous/JzrLK/
回答by Emmanuel
Try something like this
尝试这样的事情
<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>
Worked okay on Chrome, FireFox, and IE 7-9.
在 Chrome、FireFox 和 IE 7-9 上运行良好。
See fiddle: https://jsfiddle.net/weyy601z/
回答by Sem Vanmeenen
This seems to work nicely (tested in chrome, ie and firefox) :
这似乎工作得很好（在 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>
回答by Drioueche Mohammed
you can simply double everything.
你可以简单地加倍一切。
instead of
代替
having a table with 5 columns and you would like to use
<td colspan="2.5">
有一个有 5 列的表格，你想使用
<td colspan="2.5">
you can
你可以
have a table with 10 columns and you would like to use
<td colspan="5">
有一个 10 列的表，你想使用
<td colspan="5">
