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

我有一张有科尔斯潘的桌子，这张桌子不太好

请比较以下小提琴：

我原以为第二把小提琴和第一把一样

如果它们在您看来是相同的，那么使用my browser（最新的chrome），第一个浏览器将在没有任何填充的情况下渲染第一列（包含“foo”的列）。第二个在第一列中有很多左填充

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

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

福
酒吧
福走进一家酒吧。当他点食物时，酒吧把他踢了出去：(

第二部分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>

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

福
酒吧
食物走到酒吧。点食物时，他们会说：(

这怎么可能

编辑：

---

刚刚在Firefox中测试了这一点，它似乎如预期的那样工作。我想这个问题适用于webkit浏览器。

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

最好指定两个td的宽度：

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

---

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

---

试试看，让我知道这是否对你有帮助！

在这种情况下，Chrome的默认行为与Firefox和IE略有不同。
尝试添加您的样式

表格布局：固定；

，例如：

表格{
表布局：固定；
宽度：100%；
}

并调整立柱宽度（小于100%）。这会解决您的问题

另见：

---

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

*

：

.lol{
宽度：*；
}

我认为问题在于你已经给了。lol一个100%的宽度-有两列，所以它不能是100%。给它一个有效的宽度，你的表将正常工作，无论colspan行的内容如何好的，我认为这是一个使表中的列使用尽可能多的宽度的有效方法。你会选择什么方法来代替它est使正确的列使用所有剩余的空间？如果我将第一个宽度设置为1%，第二个设置为99%，是否更有效？嗯，也许我遗漏了一些东西，但这是我的观点。最后一行（即colspan 2）如何影响第一行的宽度？如果这不是您的意思，请使用示例代码更新您的答案：）要明确的是：我想用第二把小提琴的内容来实现第一把小提琴的布局。嗯，是的，这确实修正了布局。但我还是不太明白为什么。请你详细说明一下“但是因为你的第二把小提琴在测试中有一个没有空格的第二排，它只能做50%？：）老实说，我不确定，但是，浏览器似乎试图尽可能地遵循您的100%TD宽度。在第一种情况下，它试图将条形文本一直“推”到左侧，但遇到了“foo”，所以就到此为止。在第二种情况下，它也会这样做，但因为第二行有较长的文本，没有空格，所以它会尝试计算最长的文本长度，并确保它至少留有足够的空间。因为第二行没有空格，所以它在2列中所能做的最好是50%。好的，是的，这是有意义的。我现在倾向于将第一列宽度设置为1%，然后将第二列宽度设置为99%。或者有更好的方法吗？我想这取决于你真正想做什么，以及你正在处理的数据类型——但确定这两种方法是最好的，然后看看你的数据是否正确。有趣。问题是我无法设置第一列的宽度，因为我不知道它的宽度。我希望第一列尽可能宽，然后第二列尽可能宽。这就是为什么我只指定了第二个宽度的100%。我将如何以不同的方式实现这一点？*“正是您所需要的：您可以将第一列设置为所需的宽度（取决于内容），将第二列设置为所需的宽度（使用“宽度：*”）适应剩余的宽度。对于您来说，可能更清楚地认为是100%/相对于/整个表格宽度，而不是单元格的内容。好的。因为第一列的内容在运行时会发生变化，所以我不喜欢为该列指定固定宽度，然后使用table layout:fixed；。我想我会选择第一列1%和第二列99%，或者这在某种程度上是愚蠢的？你可以避免使用table layout:fixed（这只是为了解释Chrome中预览的区别）。您可以不指定第一列的宽度，并对第二列使用*：第一列第二列