Table padding not working

Question

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%; paddin         


        

Answer 1

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:

• https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing
• https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse
• https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Tables