嵌套div的边框合并问题

源代码如下:

<style>
.parent {
  border: 1px solid gray;
  width: 202px;
  height: 20px;
}
.child {
  float: left;
  width: 100px;
  height: 100%;
  border: 1px solid gray;
}
.sub1 {
  width: 98px;
  border: 1px solid gray;
}
.sub2 {
  width: 96px;
  border: 1px solid gray;
}
</style>

<div class="parent">
  <div class="child">div</div>
  <div class="child">
    <div class="sub1">div</div>
    <div class="sub1">
      <div class="sub2">div</div>
      <div class="sub2">div</div>
    </div>
  </div>
</div>

 

我想把所有div的重叠边框合并为宽度为1px的边框,但不是通过拼凑出来的,应该如何实现,先谢谢了!!!