css div内部边界

Question

我希望有人可以帮助我。我想要达到这个目的：

这是我到目前为止所做的：

以下是我目前的HTML。如何在div的内部显示边框（如第一个屏幕截图中所示）？另外，如何使每个div的高度和宽度成为正方形（不是矩形）？使用html表是更好还是可以使用div？ html代码是动态生成的，所以我不能只在各个div上添加右/左边框。

<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&#45;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&#45;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&#45;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&#45;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&#45;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&#45;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&#45;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&#45;0</span>
    </div>
    <div class="box">
        <span>M</span>
        <span>5&#45;7</span>
    </div>      
    <div class="box">
        <span>T</span>
        <span>5&#45;7</span>
    </div>      
    <div class="box">
        <span>W</span>
        <span>5&#45;7</span>
    </div>      
    <div class="box">
        <span>R</span>
        <span>5&#45;7</span>
    </div>      
    <div class="box act">
        <span>F</span>
        <span>7&#45;5</span>
    </div>      
    <div class="box">
        <span>S</span>
        <span>0&#45;0</span>
</div>

Answer 2

不要在最后一个div上添加边框。

使用填充来建立宽度和高度