Question

任何人都可以解释以下html页面的行为，这是遗留应用程序的摘录吗？

我的问题是：在“我的示例文本T1”和“我的示例文本T2”之间，渲染完全不同，唯一的区别是第二个周围有一个父表。

我对html的理解是，table是一个块级元素，根据内容计算其宽度，我不明白为什么这个样本的渲染存在这样的差异。

如果有人知道原因并且可以在不强制宽度或使用white-space:nowrap的情况下控制此行为，我会非常感激。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>test</title>
</head>
<body>
<!-- rendering is correct --> 
    <table>
        <tbody>
            <tr>
                <td style="width: 30%">&nbsp;</td>
                <td style="width: 35%">My sample text here T1</td>
                <td style="width: 35%">&nbsp;</td>
            </tr>
        </tbody>
    </table>


<!-- Problem is here : addition of a parent table. -->
<table><tr><td>

    <table>
        <tbody>
            <tr>
                <td style="width: 30%">&nbsp;</td>
                <td style="width: 35%">My sample text here T2</td>
                <td style="width: 35%">&nbsp;</td>
            </tr>
        </tbody>
    </table>

</td></tr></table>


</body>
</html>

渲染：

Answer 1

答案是T2中的外部td没有明确知道它的宽度，table，tr和td都不是块元素。看到这个小提琴：https://jsfiddle.net/fordareh/u6j64tso/

基本上，您需要外部表格具有明确的宽度：

<table style="width: 100%"><tr><td>

    <table>
        <tbody>
            <tr>
                <td style="width: 30%">&nbsp;</td>
                <td style="width: 35%">My sample text here T2</td>
                <td style="width: 35%">&nbsp;</td>
            </tr>
        </tbody>
    </table>

</td></tr></table>

Answer 2

表会缩小其内容，如果嵌套，内联内容可能会缩小，因为父级没有指定要供子级使用的宽度。

您可以删除宽度样式，也可以使用块元素，以便它可以在不干扰表格布局的情况下接收width，min-width，max-width。

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>test</title>
</head>
<body>
<!-- rendering is correct --> 
    <table>
        <tbody>
            <tr>
                <td style="width: 30%">&nbsp;</td>
                <td style="width: 35%">My sample text here T1</td>
                <td style="width: 35%">&nbsp;</td>
            </tr>
        </tbody>
    </table>


<!--  addition of a parent table. -->
<table><tr><td>

    <table>
        <tbody>
            <tr>
                <td>&nbsp;</td>
                <td>My sample text here T2</td>
                <td>&nbsp;</td>
            </tr>
        </tbody>
    </table>

</td></tr></table>

<!--  addition of a parent table. -->
<table><tr><td>

    <table>
        <tbody>
            <tr>
                <td>&nbsp;</td>
                <td><p>My sample text here T3</p></td>
                <td>&nbsp;</td>
            </tr>
        </tbody>
    </table>

</td></tr></table>
</body>
</html>

＆＃13;

递归地解释表的html呈现

2 个答案: