<td> Spacing not working in Chrome - html

Question

Basically, I want to space my tds apart from each other horizontally. In Firefox, it works fine by setting a margin, but the margin doesn't work in chrome. So I tried the following and applied it to the table
border-spacing: 40px;
border-collapse: separate;
Moreover, that solution worked in chrome, but NOT Firefox; even though guides suggested that I need the border-collapse: separate to have it work in firefox.
Without any further detail, here's the code for the table styling (the one that works in Firefox):
#tstyle3 {
margin: 10px 0 0 0px;
width: 750px;
border-collapse: separate;
}
#tstyle3 tr {
height: 270px;
border-bottom: none;
border-collapse: separate;
width: 950px;
display: inline-block;
}
#tstyle3 td {
border-top: none;
display: inline-block;
position: relative;
border-collapse: separate;
margin: 0 30px 0 0;
height: 220px;
width: 220px;
background-color: white;
float: left;
box-shadow: 0px 3px 5px #b5b6b6;
}
And the situation recreated in jsfiddle (which shows how it appears in Firefox)
http://jsfiddle.net/JjZNb/

Answer 1

What about you try something more sexy like
float:left; display:block;
http://jsfiddle.net/JjZNb/1/

Answer 2

Margin does not work for td elements.
That's not quite right. Margin doesn't work for table cells (so elements with display:table-cell. But the CSS above styles the <td> elements with display: inline-block, so they aren't table cells anymore and margin should be applying to them.

Answer 3

You can add spacing by specifying a border size, or padding for your td elements.
td{border:8px solid #fff;}
or for padding
td{padding:0 10px;}
or when border styles are already defined,
td{border-width:2px;}
or for each side
td{border-width:0 2px 0 2px;}
/* top right bottom left*/
here is a jsFiddle that demonstrates the above http://jsfiddle.net/VjkP9/