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

Answer 2

This is the reason why;

From MDN, to use padding in tables, you need to have border-collapse: separate; so as to allow for the use of border-spacing because border-spacing is a factor in the calculation of distance between the outer table edge and the edge of the outer cells (see quotes from MDN below). After that you can now assign padding a value. You can also set border-spacing: 0px; to cancel out the addition of border-spacing to the padding.

The border-spacing CSS property sets the distance between the borders of adjacent cells. This property applies only when border-collapse is separate.

The border-spacing value is also used along the outside edge of the table, where the distance between the table's border and the cells in the first/last column or row is the sum of the relevant (horizontal or vertical) border-spacing and the relevant (top, right, bottom, or left) padding on the table.

Answer 3

The prior answer shows that css can set border-[direction] for ea direction separately. But a much simpler css-only solution that replicates the old-style table cellpadding="7" border="1" can be the following. In CSS:

table { 
  border-collapse:collapse;
  width: 100%;
}
td {
  padding: 7px;
  border:1px solid;
} 

Shown in this fiddle: http://jsfiddle.net/b5NW5/77

Answer 4

You can add the cell padding in the table definition OR if you want to use CSS then use can try this:

If using CSS:

<style type="text\css">
.table {
        width: 100%;        
        border-top:1px solid red;
        border-right:1px solid red;
        border-collapse:collapse;
    }
.table td {
    padding: 7px;
    border-bottom:1px solid red;
    border-left:1px solid red;
}
</style>

<table class="table">
    <tr><td>Cell1a</td><td>Cell1b</td><td>Cell1c</td></tr>
    <tr><td>Cell2a</td><td>Cell2b</td><td>Cell2c</td></tr>
    <tr><td>Cell3a</td><td>Cell3b</td><td>Cell3c</td></tr>
</table>

If using inline:

<table cellpadding="9" cellspacing="5" style="border-collapse:collapse;" border="1">
    <tr><td>Cell1a</td><td>Cell1b</td><td>Cell1c</td></tr>
    <tr><td>Cell2a</td><td>Cell2b</td><td>Cell2c</td></tr>
    <tr><td>Cell3a</td><td>Cell3b</td><td>Cell3c</td></tr>
</table>

You can see this in action here: http://jsfiddle.net/b5NW5/1/

Hope it helps