1

为什么这个示例表，body 没有指定的宽度？

<html>  
<head>  
   <style type="text/css">  
     table{   
border-collapse:collapse;  
     }  
     table,th, td{    
        border: 4px, solid;  
     }  

     #article{
background-color: #FDF8AB;  
border: 3px solid #85A110;  
width: 760px;  
margin-top: 20px; 
margin-left: auto;  
     margin-right: auto;  
   }  
   </style>  
</head>  
<body  id="article">  
<div>
<table>  
<tr>  
    <th>First Name</th>   
    <th>Last Name</th>   
    <th>Date</th>   
    <th>Notes</th>   
</tr>   
<tr>   
    <td>Jill</td>   
    <td>Smith</td>  
    <td>20-12-2013</td>  
    <td>AAAa</td>  
</tr>  

<tr>  
    <td>Jill</td>  
    <td>Smith</td>   
    <td>20-12-2013</td>  
    <td>AAAa</td>  
</tr>  

<tr>  
    <td>Eve </td>  
    <td>Jackson</td>  
    <td>20-12-2013</td>  
    <td>AAAa</td>   
</tr>  

<tr>  
    <td>John </td>  
    <td>Doe</td>  
    <td>20-12-2013</td>  
    <td>AAAa</td>  
</tr>  

<tr>  
    <td>Adam </td>  
    <td>Johnson</td>  
    <td>20-12-2013</td>  
    <td>AAAa</td>  
</tr>  


</table>  

 </div>

</body>  
</html>
4

2 回答 2

2

您正在使用

#article {
   background-color: #FDF8AB; /* Other Styles */
}

所以当你没有为你的html元素使用任何背景颜色时，下一个父级元素是body，所以你很困惑，为元素提供背景颜色html，你会看到区别

演示

我的建议：

您不应该为标签使用fixed宽度，默认情况下让它保持原样，因为它是一个块级元素，而是将您包装在一个容器内，为此使用固定宽度和自动边距，这将为您提供所需的效果，并且以一种整洁的方式bodywidth: 100%;tabledivdiv

正确的方式

于 2013-05-11T20:33:48.083 回答
2

您应该将正文中的所有内容放入 div 或部分容器/包装器中。您在包装器上定义宽度。您将样式应用于文本对齐中心的正文。这样 div#container 或 section#content 具有定义的宽度和边距：0 auto;。

此外，如果您有 3px 边框，则您的宽度为宽度 + 左边框 + 右边框。这就是额外 6 个像素的来源。

于 2013-05-11T20:43:07.483 回答