gpt4 book ai didi

html - 表格递归 html 渲染的解释

转载 作者:行者123 更新时间:2023-11-28 06:20:41 26 4
gpt4 key购买 nike

谁能解释以下 html 页面的行为,它是遗留应用程序的摘录?

我的问题是:“My sample text here T1”和“My sample text here T2”之间的渲染完全不同,唯一的区别是第二个周围有一个父表。

我对 html 的理解是 table 是一个 block 级元素,它根据内容计算其宽度,我不明白为什么这个示例的渲染会有这样的差异。

如果有人知道为什么并且可以在不强制宽度或使用 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>

和渲染:

enter image description here

最佳答案

答案是 T2 中的外部 td 并没有明确知道它的宽度,而且 table、tr 和 td 都不是 block 元素。看到这个 fiddle :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>

关于html - 表格递归 html 渲染的解释,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35614671/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com