How do you indicate table filling in CSS? (table, not cell filling)

Question

I have a table with a colored background, and I need to specify the indentation between the table and its contents, IE cells.
The table tag does not seem to accept the value of the pad.
Firebug shows the theta table and form with a padding of 0, but does not accept the values ​​entered for them, so I think they just don't have a padding property.
But the fact is that I want the same separation between the cells than the upper cells with the table and the lower cells with the table below.
Again, what I want is not adding cells.

EDIT: Thank you for what I really need, I understand now, was the border spacing or its equivalent html, cellpacing.
But for some reason, they are not doing anything on the site I'm working on.
Both work fine on separate HTML, but they don’t.
I thought it might be some kind of style rewriting property, but the cell binding and the built-in spacing between borders should not be overwritten, right?
(I am using firefox)

EDIT 2: No, TD padding is NOT what I need. With TD padding, the upper and lower gaskets of adjacent cells are summed, so that there is half as much space (overlay) between two cells than between the upper cell and the upper border of the table. I want to have exactly the same distance between them.

Answer 1

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

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 fill in the contents of the cell, not just them, you can just use

 <table cellpadding="10"> 

OR

 td { padding: 10px; } 

Answer 2

You can set the margin for the table. Alternatively, wrap the table in a div and use the indent div.

Answer 3

Here's what you need to understand about tables ... They are not a tree of nested independent elements. They represent a single component. While individual TDs behave more or less like CSS block elements, the intermediate material (anything between TABLE and TD, including TRs and TBODY) is indivisible and does not fall into either the inline or the block . No random HTML elements are allowed in this multidimensional space, and the size of such a space of a different size is generally not customizable through CSS. Only the HTML property cellspacing can even get on it, and this property has no equivalent in CSS.

So, to solve your problem, I would suggest either a DIV wrapper, as another poster suggests, or if you absolutely must contain it in a table, you have this ugly garbage:

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

Answer 4

You cannot ... Perhaps if you placed an image of the desired effect, there was another way to achieve it.

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

Answer 5

Funny, I did just that yesterday. You just need it in the css file

 .ablock table td { padding:5px; } 

then wrap the table in a suitable div

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

Answer 6

Using css, a table can have a complement regardless of its cells.

The padding property is not inherited by its children.

So, defining:

 table { padding: 5px; } 

Must work. You can also tell the browser how to use (or in this case, not the pad) your cells.

 td { padding: 0px; } 

EDIT: IE8 not supported. Unfortunately.

Answer 7

There is one more 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 looked at my current job)

Answer 8

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

Answer 9

CSS really does not allow you to do this at the table level. As a rule, I specify cellspacing="3" when I want to achieve this effect. Obviously this is not a css solution, so take it for what it costs.

Answer 10

 table { border: 1px solid transparent; } 

Answer 11

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

Answer 12

 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.