2

我有一张带有 colspan 的表，它表现得不好。

请比较以下小提琴：

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

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

我希望第二个小提琴的行为与第一个小提琴一样。

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

第一个小提琴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>

第二小提琴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 浏览器。

4

3 回答 3

1

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

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

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

也可以看看：

为什么我的表格单元格宽度在 Chrome 中错误？

如果要使列使用所有剩余空间，则可以使用*：

.lol {
    width: *;
}
于 2013-09-02T14:34:04.823 回答
0

您的代码实际上没有任何问题。如果您更改代码第二行中的文本，它将自动更改为第一小提琴。

试试看，如果这对你有帮助，请告诉我！

于 2013-09-02T14:28:22.613 回答
0

您需要调整第一行中两列的宽度。如果您只指定单个宽度，那么它将尝试达到该宽度，但由于您的第二个 jFiddle 在测试中有第二行没有空格，它只能做 50% 而第一个出来大约 90%（因为您指定了 100%）。

最好的办法是指定两个 td 的宽度：

<table border="1">
    <tr>
        <td class="first">
            foo
        </td>
        <td class="lol">
            bar
        </td>
    </tr>
    .....

并添加/更改 css：

table {
    width: 100%;
}

.lol {
    width: 90%;
}

.first {
    width: 10%;
}
于 2013-09-02T14:26:15.557 回答