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

Question

在下面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>

Answer 1

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

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

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