表溢出 [英] Table Overflowing Outside of 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 =400cellpadding =3cellspacing =0border =0align =center> 
< tr> 
< td bgcolor =＃DDFFFFalign =centercolspan =2> 
< strong>通知！< / strong> 
< / td> 
< tr> 
< td width =50> 
< img src =http://www.example.com/img.pngwidth =50height =50alt =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的右边框，如果您将浏览器窗口缩小，将看到该表不适合它。

解决方案

执行以下操作：

 code>< 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 ）

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

I'm trying to stop a table that has width explicatly declared not to overflow outside of it's parent div. I presume I can do this in some way using ‘max-width‘, but I can't seem to get this working.

The following code (with a very small window) will cause this:

<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>

The red line is the right border of the div, and if you make your browser window small, you'll see that the table doesn't fit into it.

解决方案

Turn it around by doing:

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

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

Also I would advise you to:

• Not use the center tag (it's deprecated)
• Don't use width, bgcolor attributes, set them by CSS (width and background-color)

(assuming that you can control the table that was rendered)

这篇关于表溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！