html - 表列更改行为取决于内容 (colspan)

Question

我有一张带有 colspan 的表，但表现不佳。

请比较以下 fiddle :

http://jsfiddle.net/lucaswiener/WBdc8/

http://jsfiddle.net/lucaswiener/WBdc8/1/

我希望第二个 fiddle 的行为与第一个 fiddle 一样。

如果它们对您来说看起来相同，则使用我的浏览器(最新的 chrome)第一个呈现第一列(包含“foo”的列)而没有任何填充。第二个在第一列中有很多左侧填充。

第一个 fiddle html 代码:

<table border="1">
<tr>
    <td>
        foo
    </td>
    <td class="lol">
        bar
    </td>
</tr>
<tr>
    <td colspan="2">foo walked into a bar. When he ordered food, the bar kicked him out :(
    </td>
</tr>

第二个 fiddle html代码:

<table border="1">
<tr>
    <td>
        foo
    </td>
    <td class="lol">
        bar
    </td>
</tr>
<tr>
    <td colspan="2">foowalkedintoabar.Whenheorderedfood,thebarkickedhimout:(
    </td>
</tr>

这怎么可能？

编辑:刚刚在 Firefox 中对此进行了测试，它似乎按预期工作。我想这个问题适用于 webkit 浏览器。

Answer 1

在这种情况下，Chrome 的默认行为与 Firefox 和 IE 略有不同。
尝试在您的样式中添加 table-layout: fixed;，例如:

table {
   table-layout: fixed;
   width: 100%;
}

并调整列宽(小于100%)。它应该可以解决您的问题。

另见:

Why is my table cell width wrong in Chrome?

---

如果你想让列使用所有剩余空间，你可以使用*:

.lol {
    width: *;
}