边境崩溃让div无法正常工作

Question

我在css和html之下用于使用div创建托架设计。    在HTML中，我尝试display: table和display : table-cell。但我没有得到结果。

.bay-wrapper{ 
  display: table; 
  width:10%; 
  height:auto; 
  float:left; 
  background:#fff; 
  text-align:center;
  border-collapse:collapse;
  box-sizing:border-box;
}
.bay-cell-full{
    display: table-cell;
    border:1px solid #000;
    float:left;
    width:100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.bay-cell{
    display: table-cell;
    border:1px solid #000;
    border-collapse:collapse;
    float:left;
    width:50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
} 

<div class="bay-wrapper">
   <div class="bay-cell-full">Bay 20</div>
   <div class="bay-cell">1</div>
   <div class="bay-cell">7</div>
   <div class="bay-cell">2</div>
   <div class="bay-cell">8</div>
   <div class="bay-cell">3</div>
   <div class="bay-cell">9</div>
   <div class="bay-cell">4</div>
   <div class="bay-cell">10</div>
   <div class="bay-cell">5</div>
   <div class="bay-cell">11</div>
   <div class="bay-cell">6</div>
   <div class="bay-cell">12</div>
</div> 
    

Answer 1

边框在您的示例中折叠为单个边框（边框间距和空单元格属性将被忽略）。

该行

border-collapse:collapse; 

没关系。你确定这是你想要获得的效果吗？

https://jsfiddle.net/MadalinaTn/bthrbqxz/