表格溢出到 div 之外

Question

我试图阻止一个表，该表的宽度明确声明不会溢出其父 div 。我想我可以使用 max-width 以某种方式做到这一点，但我似乎无法让它工作。

以下代码（带有一个非常小的窗口）将导致此问题：

 <style type="text/css">
  #middlecol {
    width: 45%;
    border-right:2px solid red;
  }
  #middlecol table {
    max-width:100% !important;
  }
</style>

<div id="middlecol">
  <center>
    <table width="400" cellpadding="3" cellspacing="0" border="0" align="center">
      <tr>
        <td bgcolor="#DDFFFF" align="center" colspan="2">
          <strong>Notification!</strong>
        </td>
      <tr>
        <td width="50">
          <img src="http://www.example.com/img.png" width="50" height="50" alt="" border="0">
        </td>
        <td>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </td>
      </tr>
    </table>
  </center>
 </div>

红线是 div 的右边框，如果您将浏览器窗口调小，您会发现表格放不下。

原文由 waiwai933 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

通过执行以下操作来扭转局面：

 <style type="text/css">
  #middlecol {
    border-right: 2px solid red;
    width: 45%;
  }

  #middlecol table {
    max-width: 400px;
    width: 100% !important;
  }
</style>

另外我建议你：

• 不使用 center 标签（已弃用）
• Don’t use width , bgcolor attributes, set them by CSS ( width and background-color )

（假设您可以控制呈现的表格）

原文由 Yvo 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用 table-layout:fixed 防止表格扩展到其父 div 之外。

下面的 CSS 将使您的表格扩展到它周围的 div 的宽度。

 table
{
    table-layout:fixed;
    width:100%;
}

我在 这里 找到了这个技巧。

原文由 James Lawruk 发布，翻译遵循 CC BY-SA 2.5 许可协议