在下面JS-Fiddle example ,当其容器设置了最大宽度属性时,为什么内表会扩展到屏幕的宽度?
<table bgcolor="white" cellpadding="0" cellspacing="0" border="0" width="100%" style="width:100%">
<tr>
<td style="max-width:580px; border: solid 1px green">
<table bgcolor="red" cellpadding="0" cellspacing="0" border="0" width="100%" style="width:100%">
<tr>
<td>
MY TEST CELL!!
</td>
</tr>
</table>
<td>
</tr>
</table>
最佳答案
<table>
元素使用 css 属性 display: table
其行为不“正常”。如果您希望您的元素按预期运行,请使用 display: inline-block
或 display: block
.这样你的元素就会真正关注你的 max-width
声明。
但是,您似乎正在尝试使用表格来布置您的内容,这是一种不好的做法。表格仅用于表格数据。如果您的内容是段落,请使用 <p>
,例如。
同时尽量避免内联样式,始终使用外部 css 文件。
关于html - 最大宽度的表格不包含宽度为 100% 的单元格数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36346139/