Menu
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/
224
You need to set the margin of the body to 0 for the table to stretch the full width. Alternatively, you can set the margin of the table to a negative number as well.
What you could do is : wrap table in a div tag. add margin to div. set table width to 100%
This property sets the maximum content width of a block or a replaced element. This maximum width does not include padding, borders, or margins.
No, element width does not include padding, margin, or border. The basic difference between padding and width is that in padding you define the space around the element and on the other hand in the width you define the space of the element. Property Used: width: This property is used to define the size of the element.
use calc() to calculate the intended width:
table { margin: auto; width: calc(100% - 40px); } http://jsfiddle.net/EXS76/1/
59
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.
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
