CODEWITHSUNDEEP
htmlcsshtml-table
Jim
Jim

Reputation: 19552

Why doesn't the body become the width I specify?

Why is this sample table, the body does not have the specified width? 

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

Upvotes: 1

Views: 83

Answers (2)

stacey.mosier
stacey.mosier

Reputation: 413

You should place everything within the body into a div or section container/wrapper. You define a width on the wrapper. You apply a style to the body of text-align center. So that the div#container or section#content has a defined width and margin:0 auto;.

Also if you have a 3px border, your width with be width + border left + border right. So that's where the extra 6 pixels are coming from.

Upvotes: 2

Mr. Alien
Mr. Alien

Reputation: 157314

You are using 

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

So when you are not using any background color for your html element, the next parent level element is body and so you are confused, provide a background color to html element and you'll see the difference

Demo

My Suggestion:

You should not use fixed width for body tag, let it be width: 100%; which it is, by default, as it's a block level element, instead, wrap your table inside a container div, use fixed width and auto margins for this div which will give you the desired effect and also in a neat way

The Right Way

Upvotes: 2

Related Questions