Table padding not working
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.
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
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