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

User · Accepted Answer

The easiest best supported method is to use  lt table cellspacing  10  gt   The css way  border-spacing  not supported by IE I don t think    x000D   x000D       lt  -- works in firefox  opera  safari  chrome -- gt  x000D       lt style type  text css  gt  x000D       x000D      table foobar   x000D       border  solid black 1px  x000D       border-spacing  10px  x000D        x000D      table foobar td   x000D       border  solid black 1px  x000D        x000D       x000D       x000D       lt  style gt  x000D       x000D       lt table class  foobar  cellpadding  0  cellspacing  0  gt  x000D       lt tr gt  lt td gt foo lt  td gt  lt td gt bar lt  td gt  lt  tr gt  x000D       lt  table gt  x000D   x000D   x000D    Edit  if you just want to pad the cell content  and not space them you can simply use   lt table cellpadding  10  gt    OR  td       padding  10px

User · Answer

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

User · Answer

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    lt style gt       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     lt  style gt    lt table class  padded  gt       lt tr class  first  gt           lt td class  first  gt a lt  td gt  lt td gt b lt  td gt  lt td class  last  gt c lt  td gt       lt  tr gt       lt tr gt           lt td class  first  gt d lt  td gt  lt td gt e lt  td gt  lt td class  last  gt f lt  td gt       lt  tr gt       lt tr class  last  gt           lt td class  first  gt g lt  td gt  lt td gt h lt  td gt  lt td class  last  gt i lt  td gt       lt  tr gt   lt  table gt

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

table       border  1px solid transparent

User · Answer

table foobar      padding 30px     if border is not collapsed       or   table foobar      border-spacing 0    table foobar gt tbody      display table     border-spacing 0     or other preferred       border 30px solid transparent     30px is the  padding         Works in Firefox  Chrome  IE11  Edge

User · Answer

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

User · Answer

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   lt div class  ablock   gt   lt table gt     lt tr gt       lt td gt

User · Answer

table       background   fff      box-shadow  0 0 0 10px  fff      margin  10px      width  calc 100  - 20px

User · Answer

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

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

Examples related to html

Examples related to css

Examples related to cell

Examples related to padding

Examples related to tablelayout