Table cellspacing with CSS

Question

Is it possible to add spacing between the cells?

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>test</title> <style> #wrap { display: table-row; /* there is no also cellspacing in CSS afaik :( */ } #wrap div { display: table-cell; /* margin: 40px; doesn't work for table-cell :( */ /* border: 30px solid transparent; works but it's as good as adding padding */ /* border: 30px solid white; works but the page background is invisible */ /* decoration: */ background-color: green; padding: 20px; } </style> </head> <body> <!-- don't touch the markup --> <div id="wrap"> <div>text1</div> <div>text2</div> </div> </body> </html>

possible duplicate of How to set cellpadding and cellspacing in CSS? — user
– user, Commented Mar 7, 2014 at 20:42

o15a3d4l11s2 · Accepted Answer · 2010-03-26 09:55:07Z

4

Use margin property:

#wrap div { background-color:green; float:left; margin:10px; padding:20px; }

If this is not exactly what you want to achieve, please let me know so that I can help.

Edit: Another approach is to do this:

#wrap { border-spacing:20px; display:inline-table; }

but note that border-spacing is not fully supported on all browsers (IE6 & IE7 does not support it).

edited Mar 26, 2010 at 9:55

answered Mar 26, 2010 at 9:28

o15a3d4l11s2

4,0693 gold badges33 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

antpaw Over a year ago

i liked your first solution with "border-spacing" better because float will drive me into the clear hell. too bad there is no "border-spacing-left"

Brent Over a year ago

margin does not work on items displayed as a table-cell. In the event the user wants to build a variable row of N items that automatically fill the space they are given, you need table-cell until a newer CSS feature becomes widely supported. In this case, only your second answer applies, and it would be great if you could clarify this.

Collectives™ on Stack Overflow

Table cellspacing with CSS

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related