Table padding not working
I have a table that sits within a parent div full of body text and other content. I have the following CSS which does not seem to work:
table {width:100%; padding: 0 50px 0 50px;}
When I use margins instead of padding, it works—however, with width:100%, using margins scoots the whole thing out of the parent div. I guess I could reduce the width or specify an exact pixel amount, but the rest of the site scales with screen size and I'd like this to work like that, too.
Answer
There are some special properties related to tables. The one you are looking for is border-spacing.
table {
width: 100%;
border-collapse: separate;
border-spacing: 0 50px;
}
Example: http://jsfiddle.net/feeela/fPuQ6/
UPDATE: After playing around with my own fiddle I must admit, that I was wrong by telling that "a table doesn't have a padding". The padding on the table is working fine – at least when viewed in Chrome and Opera (12). The following snippet should do want you want too:
table {
width: 100%;
padding: 0 50px 0 50px;
}
See the updated version of the fiddle: http://jsfiddle.net/feeela/fPuQ6/3/
Nonetheless I'm still wondering why the padding isn't added to the width as for an element with display: block;.
See also: