Colspan跨越2.5列？

Question

我有一个5列的表.最后一行应该有两个单元格,间隔相等.

理想情况下,我想使用<td colspan="2.5">- 最优雅的方式是什么？

该表的边框为1,所以使用

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

看起来很难看

Answer 1

你真的需要在底行中有两个表格单元格,还是只需要两个整数行宽度的一半的单元格？如果是后者,则可<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/

Answer 2

尝试这样的事情

<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,FireFox和IE 7-9上工作得很好.

请参阅小提琴:https://jsfiddle.net/weyy601z/