Html 为什么主体没有变成我指定的宽度？_Html_Css_Html Table

Html 为什么主体没有变成我指定的宽度？

html css

Html 为什么主体没有变成我指定的宽度？,html,css,html-table,Html,Css,Html Table,为什么这个样表的正文没有规定的宽度 <html> <head> <style type="text/css"> table{ border-collapse:collapse; } table,th, td{ border: 4px, solid; } #article{ background-color: #FDF8AB; border:

为什么这个样表的正文没有规定的宽度

<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>

您正在使用

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

因此，当您没有为html元素使用任何背景色时，下一个父级元素是body，因此您感到困惑，请为html元素提供背景色，您将看到差异

我的建议是：

您不应该使用固定宽度作为主体标签，让它成为宽度：100%；默认情况下，它是一个块级元素，取而代之的是，将您的表包装在一个容器div中，为这个div使用固定宽度和自动边距，这将以一种整洁的方式为您提供所需的效果

您正在使用

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

因此，当您没有为html元素使用任何背景色时，下一个父级元素是body，因此您感到困惑，请为html元素提供背景色，您将看到差异

我的建议是：

您应该将正文中的所有内容放入div或section容器/包装器中。您可以在包装上定义宽度。将样式应用于文本主体“居中对齐”。使divcontainer或sectioncontent具有定义的宽度和边距：0 auto

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

应该将正文中的所有内容放入div或section容器/包装器中。您可以在包装上定义宽度。将样式应用于文本主体“居中对齐”。使divcontainer或sectioncontent具有定义的宽度和边距：0 auto

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

这里看起来很好-@Zenith:你说的好是什么意思？身体涵盖了所有的浏览器，但我已经把自动和760像素的宽度。我预计它会集中在浏览器窗口的中间，不确定它是否是打印错误，但是在代码中，在关闭表之前关闭DIV。这是一个打字错误。@Jim你到底在找什么？这里看起来很好-@Zenith:你说的好是什么意思？身体涵盖了所有的浏览器，但我已经把自动和760像素的宽度。我预计它会集中在浏览器窗口的中间，不确定它是否是打印错误，但是在代码中，在关闭表之前关闭DIV。这是一个打字错误。@Jim你到底在找什么？我添加了html{background:fff；}，但是没有任何改变，尽管你说的有意义。@Jim没有调整主体的大小，而是嵌套一个子元素并使用固定的宽度和自动边距，请参见演示：：好的，我将看到演示，但是你的第一把小提琴为什么与我的不同？我看到你的html的周围颜色是白色。我没有这种情况。@Jim看到css wndow，我添加了html{background:fff；}@Jim按照正确的方式做，阅读我的建议，你做的是错误的：我添加了html{background:fff；}，但是没有任何改变，尽管你说的有道理。@Jim没有调整主体的大小，相反，嵌套一个子元素并使用固定宽度的自动边距，请参见演示：：好的，我将看到演示，但是为什么您的第一把小提琴与我的不同？我看到你的html的周围颜色是白色的。我没有这种情况。@Jim看到css wndow，我添加了html{background:fff；}@Jim按正确的方式做，阅读我的建议，你做的是错误的：添加了正文{text align:center；}但是没有效果您的容器/包装器必须具有定义的宽度和边距：0 auto才能在页面上居中。您需要设置宽度的不是主体，而是容器。添加了主体{text align:center；}但没有效果您的容器/包装器必须具有定义的宽度和边距：0 auto才能在页面上居中。你需要设置宽度的不是主体，而是容器。