Html 如何使用divs模拟此表？

我有这个。上面的一个使用div。下面的一个使用table。我试着让上面的看起来和下面的相似，但我一无所获

我的目标是模拟堆叠的水平杆。我在网上找到了类似的CSS示例，但它不允许我在“框”中添加文本

代码示例

br.clear{
浮动：清晰；
}
分区全宽{
边框：1px纯黑；
高度：40px；
最大宽度：100px；
}
分区可用{
背景色：#22BB22；
颜色：#111111；
浮动：左；
字体大小：20px；
高度：40px；
文本对齐：居中；
线高：40px；
}
不可用分区{
背景色：#22222；
颜色：#DDDDDD；
浮动：左；
字体大小：20px；
高度：40px；
文本对齐：居中；
线高：40px；
}

10
10


10
10

br.clear{
浮动：清晰；
}
分区全宽{
边框：1px纯黑；
高度：40px；
最大宽度：100px；
}
分区可用{
背景色：#22BB22；
颜色：#111111；
浮动：左；
字体大小：20px；
高度：40px；
文本对齐：居中；
线高：40px；
}
不可用分区{
背景色：#22222；
颜色：#DDDDDD；
浮动：左；
字体大小：20px；
高度：40px；
文本对齐：居中；
线高：40px；
}

10
10


10
10

br.clear{
浮动：清晰；
}
分区全宽{
边框：1px纯黑；
高度：40px；
最大宽度：100px；
}
分区可用{
背景色：#22BB22；
颜色：#111111；
浮动：左；
字体大小：20px；
高度：40px；
文本对齐：居中；
线高：40px；
}
不可用分区{
背景色：#22222；
颜色：#DDDDDD；
浮动：左；
字体大小：20px；
高度：40px；
文本对齐：居中；
线高：40px；
}

10
10


10
10

像这样的东西

 div.fullwidth {
                /*border: 1px solid black; */
                height: 20px;
                max-width: 100px;
            }
            div.available {
                background-color: #22BB22;
                color: #111111;
                float: left;
                font-size: 20px;
                height: 20px;
                text-align: center;
                line-height: 20px;
                width:49%

            }
            div.notavailable {
                background-color: #222222;
                color: #DDDDDD;
                float: left;
                font-size: 20px;
                height: 20px;
                text-align: center;
                line-height: 20px;
                 width:49%;
                 border-left:2px solid #fff

            }

像这样的东西

 div.fullwidth {
                /*border: 1px solid black; */
                height: 20px;
                max-width: 100px;
            }
            div.available {
                background-color: #22BB22;
                color: #111111;
                float: left;
                font-size: 20px;
                height: 20px;
                text-align: center;
                line-height: 20px;
                width:49%

            }
            div.notavailable {
                background-color: #222222;
                color: #DDDDDD;
                float: left;
                font-size: 20px;
                height: 20px;
                text-align: center;
                line-height: 20px;
                 width:49%;
                 border-left:2px solid #fff

            }

我就是这么做的：

br.clear {
  float: clear;
}

div.fullwidth {
  display: table;
}

div.available {
  background-color: green;
  color: #111111;
  text-align: center;
}

div.notavailable {
  background-color: blue;
  color: #DDDDDD;
  text-align: center;
}

.fullwidth div {
  width: 53px;
  height: 20px;
  display: table-cell;
  margin: 2px;
  border-spacing: 5px;
  border: solid 1px white;

    color:black;
}

我就是这么做的：

br.clear {
  float: clear;
}

div.fullwidth {
  display: table;
}

div.available {
  background-color: green;
  color: #111111;
  text-align: center;
}

div.notavailable {
  background-color: blue;
  color: #DDDDDD;
  text-align: center;
}

.fullwidth div {
  width: 53px;
  height: 20px;
  display: table-cell;
  margin: 2px;
  border-spacing: 5px;
  border: solid 1px white;

    color:black;
}

---

我希望上面的（见屏幕截图）与下面的一样。而不是相反。谢谢你！再次检查答案，你希望两者看起来一样吗？我希望上面的一个（见截图）与下面的一个看起来一样。而不是相反。谢谢你！再次检查答案，是否希望两个div看起来相同？基本上，您希望两个div适合

.fullwidth

？会有两个以上的div吗？div大小是否始终相同？基本上，您希望两个div适合

.fullwidth

？会有两个以上的div吗？div的大小是否总是一样的？