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）。任何人都可以解释一下：

为什么我的<td>没有成长为包含<span>？
我可以用什么CSS来包含它的跨度？

P.S。我确实尝试过搜索这个问题的答案，但我找到的只是让人们尝试而不是让<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>

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

1 个答案: