Html 跨越2.5列的Colspan？

我有一个5列的表。最后一行应该有两个单元格，间距相等

理想情况下，我想使用

-最优雅的方法是什么

该表的边框为1，因此使用

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

def

---

看起来很难看

试试这样的

<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上工作正常

请参阅fiddle:

这似乎工作得很好（在chrome、ie和firefox中进行了测试）：

ABCSS
自卫队
def
def
缺陷
测试
测试

您真的需要在底行中放置两个表格单元格，还是只需要两个宽度为整行一半的块？如果是后者，则您可以为最后一行创建一个

，在其中放置两个

，将一个浮动到左侧，另一个浮动到右侧，并为它们指定

宽度：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>

还有通常的jsfiddle：

---

如果您确实需要将它们设置为表格单元格，则可以将水平单元格的数量加倍，将所有现有的单元格设置为

，然后将

用于最下面一行的两个单元格：

您只需将所有单元格的数量加倍即可。

而不是

有一个包含5列的表，并且您希望使用

你可以

有一个包含10列的表，您希望使用

---

改变为divs基础设计，而不是表格+1，这是多么复杂的一个有效点，虽然这只是一个小日落，对我来说是“表格”，但我仍然会重新考虑它。谢谢为什么我没有写10栏&每栏翻一倍？哦！好主意，但是。。。1） 我不希望我的表格是100%甚至是任何%，我希望它是尽可能宽的，有动态内容，并且，2）将表格单元格设置为页面宽度的50%，而不是表格宽度的50%。@LeonixSolutions fixed。忘了在我的内桌上贴上td标签。这让浏览器感到困惑。+1用于良好的旧表设计！：-）虽然这些东西变得很难阅读，但它们是一种方式……嗯，鬼鬼祟祟（+1），那么最低公分母是什么？好的，如果我让每个“正常”单元格的colspan为2，底部2的colspan为5，它应该可以工作。我试试看that@LeonixSolutions：是的，应该行。但是上面的代码也可以工作，并且比在所有tds上添加colspan更干净。好的，我将给出答案。但我承认，我不想硬向左和向右浮动，而是在两边各留出一些空间too@LeonixSolutions：您可以在浮动框内投掷一个

，以模拟填充，而不会弄乱50%（），或者在

s

（）上放置一些填充物。@LeonixSolutions:添加

s有点麻烦），在

上添加一些填充会更干净，并使HTML更漂亮。奥托，你做你该做的事，让它继续下去。是的，我将添加一些填充，而不是使用@LeonixSolutions:Cheers。检查你关心的浏览器中的填充方法，其中一些可能会把它搞砸，保留span hack作为备份。

<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>

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