Question

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

请比较以下小提琴：

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浏览器。

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: *;
}

Answer 2

您需要调整第一行中两列的宽度。如果您只指定单个宽度，那么它将尝试达到该宽度，但由于您的第二个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%;
}

Answer 3

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

尝试一下，让我知道这是否对你有帮助！

表列更改行为取决于内容（colspan）

3 个答案: