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/

Answer 3

这似乎很好用（在chrome中测试，即和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>

Answer 4

您可以将所有内容加倍。

代替

有一个包含5列的表格，您想使用<td colspan="2.5">

您可以

有一个包含10列的表格，您想使用<td colspan="5">

Colspan跨越2.5列？

4 个答案: