重叠边框 div

Question

我想创建一个仅带有div标签的表。我只使用了两个类并且效果很好。
唯一的问题是表格内单元格的边框是表格边框的两倍宽度，看起来很丑。我知道原因是所有单元格周围都有边框，但我无法修复它。我在其他帖子中尝试过一些解决方案，但在这种情况下不起作用。
有人可以帮帮我吗？多谢。请注意，我不想添加更多课程。

.row { 
  height: 100%;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.col {
  border: solid 2px blue;
  padding: 5px;
  margin: 0;
  min-height: 1px;
  flex-grow: 1;
  max-width: 100%;
  text-align: center; 
}

<div class="row">
  <div class="col">x</div>
  <div class="col">x</div>
</div>
<div class="row">
  <div class="col">x</div>
</div>
<div class="row">
  <div class="col">x</div>
  <div class="col">x</div>
  <div class="col">x</div>
</div>
<div class="row">
  <div class="row">
    <div class="col">x</div>
    <div class="col">x</div>
  </div>
  <div class="row">
    <div class="col">x</div>
    <div class="col">x</div>
  </div>
</div>

Answer 1

您可以添加负边距top并left等于边框的宽度。

.row { 
  height: 100%;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.col {
  border: solid 2px blue;
  padding: 5px;
  margin: 0;
  min-height: 1px;
  flex-grow: 1;
  max-width: 100%;
  text-align: center; 
  margin-left: -2px;
  margin-top: -2px;
}

<div class="row">
  <div class="col">x</div>
  <div class="col">x</div>
</div>
<div class="row">
  <div class="col">x</div>
</div>
<div class="row">
  <div class="col">x</div>
  <div class="col">x</div>
  <div class="col">x</div>
</div>
<div class="row">
  <div class="row">
    <div class="col">x</div>
    <div class="col">x</div>
  </div>
  <div class="row">
    <div class="col">x</div>
    <div class="col">x</div>
  </div>
</div>