HTML table full width with margin

Question

I have a table:

<table border=1>     <caption>This is a table.</caption>     <tr>         <th>One</th>         <th>Two</th>         <th>Three</th>     </tr>     <tr>         <td>Four</td>         <td>Five</td>         <td>Six</td>     </tr> </table> 

and I want it to be as wide as possible while still leaving a 20px margin on each side. So, I did this:

table{     border-collapse:collapse;     margin:20px;     padding:0;     width:100%; } 

but it ends up being the width of the parent plus an extra 20px margin on the left, causing a vertical scroll bar to appear. Is there any way to make it 40px less than the parent's width without adding another element to surround it?

jsfiddle: http://jsfiddle.net/pvHNM/

Answer 1

use calc() to calculate the intended width:

table {     margin: auto;     width: calc(100% - 40px); } 

http://jsfiddle.net/EXS76/1/

Answer 2

By CSS rules, the width property sets the width of the content of an element, so you are requiring that 100% of the available width be allocated to the table itself and some additional space be allocated for margins. This inevitably causes horizontal scrolling.

As a workaround, you can wrap the table inside a div element and set margin on it.