表格溢出到 div 之外

新手上路,请多包涵

我试图阻止一个表,该表的宽度明确声明不会溢出其父 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 许可协议

阅读 578
2 个回答

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

 <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 许可协议

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

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

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题