表单元格不能增长到其内容大小

Question

我有一个非常简单的表:

<table>
    <tbody>
        <tr>
<!-- NOTE: min-width is just to make the td's outline more visible -->
            <td style="border: 1px dotted blue; min-width:130px;">
                <span style="padding: 50px; background:red">x</span>
            </td>
        </tr>
    </tbody>
</table>

然而，我对它产生的东西感到困惑。我本来希望<td>能够增长到它的内容大小，给我一个围绕着一大块红色的蓝色虚线。

但这不会发生。相反，行高度保持固定(正如您可以通过查看蓝线看到的那样)，并且内部<span>溢出超过<td>，而不改变它。

显然我误解了表细胞是如何生长的，因为我认为它们总是会扩展到适合它们的内容(除非我使用，说，overflow: hidden)。谁能解释一下:

1. 为什么我的<td>没有增长到包含它的<span> ?
我可以用什么CSS来使它包含它的span?

注:我确实试着寻找这个问题的答案，但我所能找到的只是人们试图而不是让他们的<td>生长(这意味着，默认情况下，它们确实生长)。

Answer 1

我认为问题是内联水平元素<span> + padding。如果您将其设置为span { display: block; }，那么它将按预期工作。

jsfiddle

span { display: block; }

<table>
    <tbody>
        <tr>
<!-- NOTE: min-width is just to make the td's outline more visible -->
            <td style="border: 1px dotted blue; min-width:130px;">
                <span style="padding: 50px; background:red">x</span>
            </td>
        </tr>
    </tbody>
</table>