为什么填充不适用于带有表格的div？

Question

我在这里有这个简单的html代码。我不明白为什么在第二个DIV填充没有显示？如果我删除cellpadding和间距，我看到大约10个像素填充，但不是我想要的20px。

为什么？

<div style="position: relative; margin: 0 auto; padding: 0 auto; max-width: 860px;"> 
     <div style="border:1px solid #999; padding 20px; margin: 40px 10px; background: red;"> 
      <table cellpadding="0" cellspacing="0" border="0" width="100%"> 
       <tr> 
        <td width="55"> xxx </td> 
        <td style="font-size: 14px;">xxx </td> 
       </tr> 
      </table> 
     </div> 
    </div> 

Answer 1

绝对没有理由。

你忘记你的`table`的:后padding

<div style="position: relative; margin: 0 auto; padding: 0 auto; max-width: 860px;"> 
    <div style="border:1px solid #999; padding: 20px; margin: 40px 10px; background: red;"> 
     <table cellpadding="0" cellspacing="0" border="0" width="100%"> 
      <tr> 
       <td width="55">xxx</td> 
       <td style="font-size: 14px;">xxx</td> 
      </tr> 
     </table> 
    </div> 
</div> 

See jsfiddle

Answer 2

外部div的填充正在减少内部div的全部填充。外部div的填充是0px auto，意思是填充到中心。尝试使用外部div的say 2px的填充以查看效果。希望这可以帮助你。

Answer 3

你的外部DIV是问题所在。它将内部DIV中的设置填充最小化。但是，为什么不将cellpadding设置为10px？

Answer 4

您的table的宽度为其父项的宽度为100%，该项具有填充。