我认为桌子比较容易做饭,但是这个打起了我的头.问题是宽度100％的表不填充它的父div.
<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.可能是什么问题呢？
感谢任何帮助.
解决方法
标题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>
