1

このサンプル テーブルは、ボディの幅が指定されていないのはなぜですか?

<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

ボディ内のすべてを div またはセクション コンテナー/ラッパーに配置する必要があります。ラッパーで幅を定義します。text-align center の本文にスタイルを適用します。div#container または section#content に定義された幅と margin:0 auto; があるようにします。

また、3px の境界線がある場合、幅は幅 + 左の境界線 + 右の境界線になります。余分な 6 ピクセルはそこから来ています。

于 2013-05-11T20:43:07.483 に答える