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.

Marlie

You could set the margin and width of the table to percentages. – Aurlie

possible duplicate: #1751170 – Tricycle

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

Tricycle

border-collapse: seperate has so many unintended and bad side effects that any answer telling people to switch to using it is probably not an answer most people should be using – Diseased

@JohnMiller Can you note which side-effects or can you please add a link to some sort of documentation on those? – Tricycle

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.

Winnebago

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

Unexampled

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

Shoat