How do you specify table padding in CSS? (table, not cell, padding )

Question

I have a table with a colored background and I need to specify the padding between the table and it's content, I.E. cells.
The table tag doesn't seem to accept a padding value.
Firebug shows the table and tbody's layout with padding 0 but doesn't accept any value entered for them, so I guess they just don't have the padding property.
But the thing is I want the same separation between cells than the top cells with the table top and the bottom cells with the table's bottom.
Again, what I want is not cell-padding.

EDIT: Thanks, what I really needed, I realize now, was border-spacing, or its html equivalent, cellspacing.
But for some reason, they don't do anything in the site I'm working on.
Both work great on a separate HTML, but in the site they don't.
I thought it could be some style overwriting the property, but cellspacing and an inline border-spacing shouldn't get overwritten, right?
(I use firefox )

EDIT 2: No, TD padding is NOT what I need. With TD padding, top and bottom paddings of adjacent cells sum up, so there's double the space (pad actually) between two cells than between the top cell and the table top border. I want to have exactly the same distance between them.

Iata

Answer 1

The easiest/best supported method is to use <table cellspacing="10">

The css way: border-spacing (not supported by IE I don't think)

    <!-- works in firefox, opera, safari, chrome -->
    <style type="text/css">
    
    table.foobar {
    	border: solid black 1px;
    	border-spacing: 10px;
    }
    table.foobar td {
    	border: solid black 1px;
    }
    
    
    </style>
    
    <table class="foobar" cellpadding="0" cellspacing="0">
    <tr><td>foo</td><td>bar</td></tr>
    </table>

Edit: if you just want to pad the cell content, and not space them you can simply use

<table cellpadding="10">

OR

td {
    padding: 10px;
}

Scandic

border-spacing is supported in IE8, but not earlier versions. border-collapse can be used to achieve cellspacing="0" across browsers, but not higher values. – Chihli

Oh! THAT'S the key! I was wondering if there wasn't any other property acting upon spacing... and it's border-collapse! Thanks! – Iata

border-spacing doesn't seem to work in the later versions of Firefox – Primipara

cellpadding isn't supported in HTML5! – Tiber

Answer 2

You could set a margin for the table. Alternatively, wrap the table in a div and use the div's padding.

Wanda

Answer 3

Here's the thing you should understand about tables... They're not a tree of nested independent elements. They're a single compound element. While the individual TDs behave more or less like CSS block elements, the intermediate stuff (anything between the TABLE and TD, including TRs and TBODYs) is indivisible and doesn't fall into either inline nor block. No random HTML elements are allowed in that other-dimensional space, and the size of such other-dimensional space isn't configurable at all through CSS. Only the HTML cellspacing property can even get at it, and that property has no analog in CSS.

So, to solve your problem, I'd suggest either a DIV wrapper as another poster suggests, or if you absolutely must keep it contained in the table, you have this ugly junk:

<style>
    .padded tr.first td { padding-top:10px; }
    .padded tr.last td { padding-bottom:10px; }
    .padded td.first { padding-left:10px; }
    .padded td.last { padding-right:10px; }
</style>

<table class='padded'>
    <tr class='first'>
        <td class='first'>a</td><td>b</td><td class='last'>c</td>
    </tr>
    <tr>
        <td class='first'>d</td><td>e</td><td class='last'>f</td>
    </tr>
    <tr class='last'>
        <td class='first'>g</td><td>h</td><td class='last'>i</td>
    </tr>
</table>

Stheno

It is also possible to use CSS pseudo elements (:first-child, :last-child) instead of adding (.first, .last) classes. – Letrice

Yeah, today, but I answered this in 2009! – Stheno

Answer 4

You can't... Maybe if you posted a picture of the desired effect there's another way to achieve it.

For example, you can wrap the entire table in a DIV and set the padding to the div.

Exarate

Answer 5

Funny, I was doing precisely this yesterday. You just need this in your css file

.ablock table td {
     padding:5px;
}

then wrap the table in a suitable div

<div class="ablock ">
<table>
  <tr>
    <td>

Shanon

The easiest and bulletproof approach. – Metallography

Answer 6

There is another trick :

/* Padding on the sides of the table */
table th:first-child, .list td:first-child { padding-left: 28px; }
table th:last-child, .list td:last-child { padding-right: 28px; }

(Just saw it at my current job)

Pax

Answer 7

With css, a table can have padding independently of its cells.

The padding property is not inherited by its children.

So, defining:

table {
    padding: 5px;
}

Should work. You could also specifically tell the browser how to pad (or in this case, not pad) your cells.

td {
    padding: 0px;
}

EDIT: Not supported by IE8. Sorry.

Licastro

I didn't see padding as a table property anywhere, is it? – Iata

Padding is not an HTML property of table, but it is specifiable in CSS. However, not all browsers will support it. – Licastro

Answer 8

You can try the border-spacing property. That should do what you want. But you may want to see this answer.

Tayib

Answer 9

CSS doesn't really allow you to do this on a table level. Generally, I specify cellspacing="3" when I want to achieve this effect. Obviously not a css solution, so take it for what it's worth.

Honolulu

Answer 10

table {
    background: #fff;
    box-shadow: 0 0 0 10px #fff;
    margin: 10px;
    width: calc(100% - 20px); 
}

Lucic

This question has been answered and accepted 7 years ago. – Mcclintock

Answer 11

table.foobar
{
   padding:30px; /* if border is not collapsed */
}

or 

table.foobar
{
   border-spacing:0;
}
table.foobar>tbody
{
   display:table;
   border-spacing:0; /* or other preferred */
   border:30px solid transparent; /* 30px is the "padding" */
}

Works in Firefox, Chrome, IE11, Edge.

Pedantry

Answer 12

table {
    border: 1px solid transparent;
}

Combat

Welcome to stackoverflow ! Please explain your answer. – Ming

In case you don't need to distinguish the table border (I mean, give it a color), you can just make the border transparent and simulate padding just between table border and its content. In case you do need to distinguish the table border, you can simulate it inserting the table in a parent DIV with a different background color. Check this fiddle: jsfiddle.net/34fq0gru/1 – Combat