html - 使用 Grid Css 折叠边框？

Question

我已经使用 Divs 和网格 css 构建了一个“表格”，我正在研究如何使用网格 css 折叠边框。

问题:如果上面的 div 有底部边框而下面的 div 有顶部边框，则存在双边框。

我们能避免吗？

.bodyTable {
    grid-template-columns: 220px 220px 220px 220px;
    grid-template-rows: 110px 110px 110px;
}

.displayGrid {
    display: grid;
}

.borderBottom{
  border: solid;
  border-width: 0px 0px 1px 0px;
}

.borderTop{
   border: solid;
   border-width: 1px 0px 0px 0px;
}

<div id="table" class="displayGrid bodyTable">
   <div class="borderBottom">
      A
   </div>
   <div class="borderBottom">
      B
   </div>
   <div class="borderBottom">
      C
   </div>
   <div class="borderBottom">
      D
   </div>
   <div class="borderTop">
      G
   </div>
   <div  class="borderTop">
      H 
   </div>
   <div>
      I
   </div>
   <div>
      J
   </div>
   <div>
      M
   </div>
   <div>
      N
   </div>
   <div>
      O
   </div>
   <div>
      P
   </div>
</div>

Answer 1

一个简单的解决方案是给 borderTop 一个负边距。然而，这取决于应用类的位置。

.bodyTable {
    grid-template-columns: 220px 220px 220px 220px;
    grid-template-rows: 110px 110px 110px;
}

.displayGrid {
    display: grid;
}

.borderBottom{
  border: solid;
  border-width: 0px 0px 1px 0px;
}

.borderTop{
   border: solid;
   border-width: 1px 0px 0px 0px;
   margin-top: -1px;
}

<div id="table" class="displayGrid bodyTable">
   <div class="borderBottom">
      A
   </div>
   <div class="borderBottom">
      B
   </div>
   <div class="borderBottom">
      C
   </div>
   <div class="borderBottom">
      D
   </div>
   <div class="borderTop">
      G
   </div>
   <div  class="borderTop">
      H 
   </div>
   <div>
      I
   </div>
   <div>
      J
   </div>
   <div>
      M
   </div>
   <div>
      N
   </div>
   <div>
      O
   </div>
   <div>
      P
   </div>
</div>