表溢出

我试图阻止宽度被明确声明为不会溢出它的父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的右边框，如果你让你的浏览器窗口小，你会看到桌子不适合它。

来源

2010-02-13 waiwai933

题外话说：不要使用''

。它已被弃用多年。另外，你的桌子上已经有一个'align =“center”了。 – 2010-02-13 21:55:41

这是我无法控制的不幸的事情。 div内的内容实际上包含在不是由我生成的文件中。我只能触摸CSS，但如果可以的话我会消除

。 – waiwai933 2010-02-13 22:05:05

围着它转做：

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

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

此外，我会建议你：

不使用center标签（它不建议使用）
不要使用width，bgcolor属性，通过CSS设置（width和background-color）

（假设你可以控制被渲染表）

来源

2010-02-13 21:55:08 Zyphrax

如果我制作宽度：100％，它会忽略我的保证金：对。这会导致单杠滚动 – Jesse 2017-02-17 15:19:51

-2

有在桌子上width="400"，删除它，它会工作...

来源

2010-02-13 21:55:35 dale

粗解决办法是设置display: table上包含div 。

来源

2010-02-13 22:36:00 questzen

这真是太棒了，正是我一直在寻找的东西。为了帮助他人，这里有一些googleable字符串：我试图使用CSS来适应父div溢出，或适合背景覆盖溢出的表内容。这工作完美，非常感谢！ – trisweb 2012-07-12 20:33:47

只是一个附录，请注意所应用的上下文，这是用来赋予表格布局类似行为，并因此存在其他样式属性，如表格行，表格单元格。表格布局不会浮动。在时间显示：表属性本身是不够的 – questzen 2012-07-18 06:11:19

也是在这里挖了几个小时的答案。搜索引擎的字符串： div里面的表格不会滚动，firefox。与表Div不会滚动，Firefox。没有滚动条出现在div内的表。 – user2038085 2015-08-31 16:50:56

147

您可以通过使用table-layout:fixed来防止表扩展超出其父div。

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

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

我发现这个把戏here。

来源

2010-12-17 11:46:01

+44

这会强制所有列的宽度相同...不是非常有用 – 2013-07-09 01:36:25

实际上，您仍然可以使列宽度不同，您只需在''或第一行的''（与让它根据文本大小流动）。从MDN：“fixed：表格和列的宽度由表和列元素的宽度或第一行单元格的宽度设置，后续行中的单元格不会影响列宽度。” – philfreo 2014-01-30 22:58:19

@philfreo你从一大堆麻烦中拯救了我。谢谢！ – Daria 2016-07-02 06:59:13

起初我用James Lawruk的方法。然而这改变了td的所有宽度。

我的解决方案是在列上使用white-space: normal（设置为white-space: nowrap）。这样文字就会一直中断。使用word-wrap: break-word将确保所有内容在需要时都会中断，甚至在一个字的中途。

的CSS看起来是这样，那么：

td, th { 
    white-space: normal; /* Only needed when it's set differntly somewhere else */ 
    word-wrap: break-word; 
}

这可能并不总是理想的解决方案，为word-wrap: break-word可能使你的话在表中难以辨认。然而，它会保持你的桌子正确的宽度。

来源

2015-02-20 12:08:02

帮了很多。上述解决方案没有工作 – 2016-04-14 07:22:04

我尝试了上面提到的所有解决方案，然后没有工作。我有三张桌子，一张在另一张下面。最后一个流了过来。我固定它使用：

/* Grid Definition */ 
table { 
    word-break: break-word; 
}

对于IE11在边缘模式，则需要将其设置为word-break:break-all

来源

2015-12-01 22:19:07

这是一个很好的CSS我不知道 – 2017-12-05 20:19:41

我试过几乎所有的上述，但对我没有工作......下面做

word-break: break-all;

这是父DIV（表中的容器）

来源

2018-02-21 15:11:30

回答

相关问题