宽度为 100% 的表格未填充其父 div。
示例 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>
这会产生以下输出:
表格未填充 div。可能是什么问题呢？
最佳答案
header div 的宽度为 100%，内边距为 5px，这会导致它超出其限制。 为什么不为整个事情使用一个表格？
这是一个工作版本:
<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>
关于html - 宽度 100% 的表格未填充父级 <div>，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4051373/