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

Question

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

<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文件。