Question

所以我在div里面有一个表，我没有指定任何宽度。对于包含大量内容的表，表宽度似乎超出了父div的宽度。为什么会这样？如何使表格宽度始终为父div的百分比？

Answer 1

设置表格的百分比宽度，并确保您的CSS未在其他地方声明div的宽度。仔细检查您的HTML以确保正确嵌套表并关闭div标签。像这样：

<!DOCTYPE html>
<html>
  <head>
    <title>Whatever</title>
  </head>
  <body>
    <div>
      <table><!--all your table stuffs--></table>
    </div>
  </body>
</html>

CSS：

div{
  width: 90%;
}

table {
  width: 90%;
}

类是解决此问题的更好方法，但上面的代码将确保您的div是页面宽度的90％，并且表格是div宽度的90％（允许边距，填充等）。

Answer 2

CSS是你的朋友。

<table style="table-layout:fixed">

这将确保table元素在宽度而不是内容中具有最终结果。

强制性的喂食示例：

<style>
#sampleTable { 
    table-layout:fixed;
    width:80%;

    background-color:#99F;
 }

#container { 
    width:500px;

    background-color:#F99;
 }
</style>

<div id="container">
    <table id="sampleTable">
        <tr><td>Exampleofreallylongtextwhichshouldbreaklayoutnormally</td></tr>
    </table>
</div>

在该示例中，表格应始终为400像素（父级500px的80％）。填充，边距等的典型警告仍然适用。

您可能还需要考虑word-wrap和overflow来确定如何处理通常会超出表格大小的内容。

表与父div之间的关系

2 个答案: