Controlling Spacing Between Table Cells

Question

I m trying to create a table where each cell has a background color with white space between them  But I seem to be having trouble doing this   I tried setting td margins but it seems to have no effect   table myclass td       background-color  lime      margin  12px 12px 12px 12px       If I do the same thing with padding  it works  but then I don t have the spacing between cells   Could someone help me with this   jsFiddle  http   jsfiddle net BfBSM

User · Answer

Check this fiddle   You are going to need to take a look at using border-collapse and border-spacing   There are some quirks for IE  as usual    This is based on an answer to this question   x000D   x000D  table test td     background-color  lime    margin  12px 12px 12px 12px    padding  12px 12px 12px 12px     table test     border-collapse  separate    border-spacing  10px     border-collapse  expression  separate   cellSpacing  10px      x000D   lt table class  test  gt     lt tr gt       lt td gt Cell lt  td gt       lt td gt Cell lt  td gt       lt td gt Cell lt  td gt     lt  tr gt     lt tr gt       lt td gt Cell lt  td gt       lt td gt Cell lt  td gt       lt td gt Cell lt  td gt     lt  tr gt     lt tr gt       lt td gt Cell lt  td gt       lt td gt Cell lt  td gt       lt td gt Cell lt  td gt     lt  tr gt   lt  table gt  x000D   x000D   x000D

User · Answer

Use border-collapse and border-spacing to get spaces between the table cells  I would not recommend using floating cells as suggested by QQping   JSFiddle

User · Answer

Use the border-spacing property on the table element to set the spacing between cells   Make sure border-collapse is set to separate  or there will be a single border between each cell instead of a separate border around each one that can have spacing between them

User · Answer

table test td       background-color  lime      padding  12px      border 2px solid  fff border-collapse separate

User · Answer

To get the job done  use   lt table cellspacing 12 gt    If you   d rather    be right    than get things done  you can instead use the CSS property border-spacing  which is supported by some browsers

[html] Controlling Spacing Between Table Cells

Examples related to html

Examples related to css

Examples related to css-tables