-1

所以我在 div 中有一个表格，我没有指定任何宽度。对于内容很多的表格，表格宽度似乎超过了父 div 的宽度。为什么会出现这种情况？如何使表格宽度始终是父 div 的某个百分比？

4

2 回答 2

0

为表格设置百分比宽度，并确保您的 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%（允许边距、填充等）。

于 2013-07-10T23:08:01.830 回答
0

CSS 是你的朋友。

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

这将确保表格元素对宽度而不是内容拥有最终决定权。

强制用勺子喂食的例子：

<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 像素（父级 500 像素的 80%）。填充、边距等的典型警告仍然适用。

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

于 2013-07-10T23:08:11.173 回答