Table 最大宽度不包含宽度为 100% 的单元格数据

Question

在下面的 JS-Fiddle example 中，当其容器设置了最大宽度属性时，为什么内部 table 扩展到屏幕的宽度？

<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>

Answer 1

<table> 元素使用 css 属性 display: table 不符合 "normally"。如果您希望您的元素按预期运行，请使用 display: inline-block 或 display: block。这样你的元素就会真正关注你的 max-width 声明。

但是，您似乎正在尝试使用表格来布置您的内容，这是一种不好的做法。表格仅用于表格数据。例如，如果您的内容是段落，请使用 <p>。

同时尽量避免内联样式，始终使用外部 css 文件。

Table 最大宽度不包含宽度为 100% 的单元格数据

Table with max width doesnt contain cell data of width 100%

html

css

width