最大宽度表不包含宽度为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，它不会表现为＆＃34;通常＆＃34;。如果您希望元素按预期运行，请使用display: inline-block或display: block。这样，您的元素实际上会关注您的max-width声明。

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

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