Html 宽度 100% 的表格未填充父 <div>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4051373/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Table of width 100% not filling parent <div>
提问by Nirmal
A table of width 100% is not filling its parent div.
宽度为 100% 的表格未填充其父 div。
Example html:
示例 html：
<div style="width:100%; margin-top:20px;">
<div style="width:100%; padding:5px; background:#ccc; font-weight:900;">Table Top</div>
<table width="100%" border="0" cellspacing="0" cellpadding="5" style="border:1px solid #aaa;">
<tr style="background:#eee;">
<td> </td>
<td><strong>L</strong></td>
<td><strong>B</strong></td>
<td><strong>H</strong></td>
<td><strong>W</strong></td>
</tr>
<tr style="background:#fafafa;">
<td style="border:1px solid #ccc; border-width:1px 1px 0 0;">
Unit 1
</td>
<td style="border:1px solid #ccc; border-width:1px 1px 0 0;">
550 mm
</td>
<td style="border:1px solid #ccc; border-width:1px 1px 0 0;">
550 mm
</td>
<td style="border:1px solid #ccc; border-width:1px 1px 0 0;">
25 mm
</td>
<td style="border:1px solid #ccc; border-width:1px 0 0 0;">
60.00 kg
</td>
</tr>
</table>
</div>
This produces the following output:
这会产生以下输出：
The table is not filling the div. What could be the problem?
该表未填充 div。可能是什么问题呢？
回答by Paul Ardeleanu
The header div has a width of 100% and a padding of 5px which causes it to expand over its limits. Why not use a table for the whole thing?
标题 div 的宽度为 100%，填充为 5px，这会导致它超出其限制范围。为什么不使用一张桌子来做整件事呢？
Here is an working version:
这是一个工作版本：
<div style="width:100%; margin-top:20px;">
<div style="width:100%; background:#ccc; font-weight:900;"><div style="padding:5px;">Table Top</div></div>
<table width="100%" border="0" cellspacing="0" cellpadding="5" style="border:1px solid #aaa;">
<tr style="background:#eee;">
<td> </td>
<td><strong>L</strong></td>
<td><strong>B</strong></td>
<td><strong>H</strong></td>
<td><strong>W</strong></td>
</tr>
<tr style="background:#fafafa;">
<td style="border:1px solid #ccc; border-width:1px 1px 0 0;">
Unit 1
</td>
<td style="border:1px solid #ccc; border-width:1px 1px 0 0;">
550 mm
</td>
<td style="border:1px solid #ccc; border-width:1px 1px 0 0;">
550 mm
</td>
<td style="border:1px solid #ccc; border-width:1px 1px 0 0;">
25 mm
</td>
<td style="border:1px solid #ccc; border-width:1px 0 0 0;">
60.00 kg
</td>
</tr>
</table>
回答by Spudley
Its a myth that tables are easier to style -- they are easier in some respects, but they have plenty of quirks of their own. You are using them correctly though, since you are displaying tabular data, so don't let anyone tell you not to use them. Also, the table really has nothing to do with the problem here.
表格更容易设计是一个神话——它们在某些方面更容易，但它们有很多自己的怪癖。但是，您正在正确使用它们，因为您正在显示表格数据，所以不要让任何人告诉您不要使用它们。此外，该表确实与这里的问题无关。
In this case, your issue is the 5px padding on the <div>which is causing the <div>to be 10px bigger than the 100% it would be otherwise (10px because it has 5px added to either side).
在这种情况下，您的问题是 5px 填充<div>导致<div>10px 比 100% 大 10px 否则（10px，因为它在任一侧添加了 5px）。
The solutions: (any one of the following will solve the issue for you)
解决方案：（以下任何一项都可以为您解决问题）
- Give your
<table>the same padding as the<div> - Put the padding on the outer
<div> - Change the padding on the
<div>to only apply to the top and bottom, with zero padding left and right (padding:5px 0or padding-top:5px; padding-bottom:5px;`). - Put the
<div>inside another<div>and style the outer one of the twowidth:100%and the inner onepadding:5px;
- 给你
<table>相同的填充<div> - 将填充物放在外面
<div> - 将 上的填充更改
<div>为仅适用于顶部和底部，左右填充为零（padding:5px 0或 padding-top:5px; padding-bottom:5px;`）。 - 把
<div>里面的另一个<div>和风格两外一个width:100%和内一个padding:5px;
If I had to pick one of those, I'd go with the padding-top/padding-bottom option, but they should all work for you; it depends on exactly how you want it to look.
如果我必须选择其中之一，我会选择 padding-top/padding-bottom 选项，但它们应该都适合你；这完全取决于您希望它的外观。
Also, bear in mind that <div>s are full width by default, so you don't need the width:100%on your div at all. In fact, removing that may even solve the problem itself since the div will fit itself to its surroundings, so may take the padding into account.
另外，请记住，<div>默认情况下 s 是全宽的，因此您根本不需要width:100%div 上的 。事实上，删除它甚至可以解决问题本身，因为 div 会适应它的周围环境，因此可以考虑填充。
回答by Liam
The thing to do here may be to use a table header (thead) instead of the divand then you don't have to mess with padding at all. This also helps with SEO and is cleaner markup for the page.
这里要做的事情可能是使用表头 ( thead) 而不是 ，div然后您根本不必弄乱填充。这也有助于搜索引擎优化，并为页面提供更清晰的标记。
<div style="width:100%; margin-top:20px;">
<table width="100%" border="0" cellspacing="0" cellpadding="5" style="border:1px solid #aaa;">
<thead>
<tr style="background:#ccc; font-weight:900;">
<th>Table Top</th>
</tr>
</thead>
<tr style="background:#eee;">
<td> </td>
<td><strong>L</strong></td>
<td><strong>B</strong></td>
<td><strong>H</strong></td>
<td><strong>W</strong></td>
</tr>
<tr style="background:#fafafa;">
<td style="border:1px solid #ccc; border-width:1px 1px 0 0;">
Unit 1
</td>
<td style="border:1px solid #ccc; border-width:1px 1px 0 0;">
550 mm
</td>
<td style="border:1px solid #ccc; border-width:1px 1px 0 0;">
550 mm
</td>
<td style="border:1px solid #ccc; border-width:1px 1px 0 0;">
25 mm
</td>
<td style="border:1px solid #ccc; border-width:1px 0 0 0;">
60.00 kg
</td>
</tr>
</table>
回答by Lill Lansey
Cellpadding="5" is what is causing the discrepency.
Cellpadding="5" 是导致差异的原因。
