css – 表溢出Div

前端之家收集整理的这篇文章主要介绍了css – 表溢出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的右边框,如果您将浏览器窗口缩小,您会看到表格不适合它。

解决方法

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

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

我也建议你:

>不使用中心标记(已弃用)
>不要使用width,bgcolor属性,通过CSS(width和background-color)

(假设您可以控制呈现的表)

猜你在找的CSS相关文章