Table border spacing with div - html

Question

Hello,
I am newbie on CSS, and I am going to design a pricing table with div(table-less). I use below css. My main problem is customized space between columns and rows.
When I add "border-spacing" four sides of cell would have border. But As you can see in picture I need different space on each side of cells.
For example border space on top and bottom 0, border space on left and right 10px. But I can not find any solution.
css style:
.Table{
display: table;
}
.Title{
display: table-caption;
text-align: center;
font-weight: bold;
font-size: larger;
}
.Heading{
display: table-row;
font-weight: bold;
text-align: center;
}
.Row{
display: table-row;
}
.Cell{
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
text-align: center;
}
.Full_width{
width: 100%;
}
.No_border{
border: none;
}
.mostpopular_tag{
background-color:#F25050;
color: #fff;
}
.pricing_table_header{
line-height: 21px;
background-color: #181818;
color: #fff;
}
And Table HTML structure is like below:
<div class="Table full_width">
<div class="Row">
<div class="Cell No_border">
<p></p>
</div>
<div class="Cell No_border mostpopular_tag">
<p>Most Popular</p>
</div>
<div class="Cell No_border">
<p></p>
</div>
</div>
<div class="Heading ">
<div class="Cell No_border pricing_table_header">
<p>Heading 1</p>
</div>
<div class="Cell No_border pricing_table_header">
<p>Heading 2</p>
</div>
<div class="Cell No_border pricing_table_header">
<p>Heading 3</p>
</div>
</div>
<div class="Row">
<div class="Cell No_border">
<p>Row 1 Column 1</p>
</div>
<div class="Cell No_border">
<p>Row 1 Column 2</p>
</div>
<div class="Cell No_border">
<p>Row 1 Column 3</p>
</div>
</div>
<div class="Row">
<div class="Cell No_border">
<p>Row 2 Column 1</p>
</div>
<div class="Cell No_border">
<p>Row 2 Column 2</p>
</div>
<div class="Cell No_border">
<p>Row 2 Column 3</p>
</div>
</div>
</div>
This is demo of my table: http://jsfiddle.net/2rFfL/

Answer 1

The border, margin, and padding properties have different versions for "all over" versus "each side"
So, border could be done like this:
border-width: 3px;
Or it can be done like this (first number is top, second right, third bottom, fourth left):
border-width: 3px 5px 2px 10px;
Or, you can specify each like this:
border-top-width: 3px;
border-right-width: 5px;
border-bottom-width: 2px;
border-left-width: 10px;

Answer 2

border-spacing accepts two values. If you supply both values, as in border-spacing: 10px 0;, then the first applies horizontally and the second vertically.
http://www.w3schools.com/cssref/pr_border-spacing.asp
Edit: http://jsfiddle.net/2rFfL/1/