仅 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>