css div inner border only - css

Question

I hope someone can help me. I am trying to get to this:
This is what I have so far:
And below is my current html. How can I show the border on just the inner portion of the divs (like in the first screenshot)? Also, how do I make the height and width of each div a square (not rectangular)? Is it better to use an html table or is this possible using divs? The html code is dynamically being generated, so I cannot just add the right/left border on the individual divs.
<div style="width: 100%; text-align: center;">
<div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;">
<span style="font-weight: bold;">S</span>
<br/>
0-0
</div>
<div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;">
<span style="font-weight: bold;">M</span>
<br/>
5-7
</div>
<div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;">
<span style="font-weight: bold;">T</span>
<br/>
5-7
</div>
<div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;">
<span style="font-weight: bold;">W</span>
<br/>
5-7
</div>
<div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;">
<span style="font-weight: bold;">R</span>
<br/>
5-7
</div>
<div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;">
<span style="font-weight: bold;">F</span>
<br/>
7-5
</div>
<div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;">
<span style="font-weight: bold;">S</span>
<br/>
0-0
</div>

Answer 1

<style type="text/css">
.wrapper {
width: 400px;
text-align: center;
}
span {
display:block;
}
.box {
float: left;
height:40px;
width: 40px;
background-color: #CCCCCC;
border-left: 1px solid black;
}
.box.act {
background-color:white;
}
.box:first-child {
border:none;
}
.box > span:first-child {
font-weight:bold;
}
</style>
<div class="wrapper">
<div class="box">
<span>S</span>
<span>0-0</span>
</div>
<div class="box">
<span>M</span>
<span>5-7</span>
</div>
<div class="box">
<span>T</span>
<span>5-7</span>
</div>
<div class="box">
<span>W</span>
<span>5-7</span>
</div>
<div class="box">
<span>R</span>
<span>5-7</span>
</div>
<div class="box act">
<span>F</span>
<span>7-5</span>
</div>
<div class="box">
<span>S</span>
<span>0-0</span>
</div>

Answer 2

don't add border on the last div.
use padding to establish widths and heigts