テーブル要素以外に(divに)border-collapseを使用する方法

cssでリスト要素にボーダーを指定するとき線が重なって見栄えが悪いことがよくあります。そのときによくやろうとするのが疑似要素を使って最初のリスト要素の右側だけボーダーを無しにするとかをやるのですが、border-collapseというcssプロパティで線の重なりを自動的に一つの境界線にしてくれるものがあります。

ただこのborder-collapseプロパティはテーブル要素にしか使えないのかな？と思っていたのですが、別にテーブル要素でなくともborder-collapseは使えるようです。

table要素にborder-collapseを使用する

table要素にborder-collapseを使用するには次のようにします。

table{
    border-collapse: collapse;
}

この場合はtdやthにborderを設定している場合に重なりがあった場合は境界線を一つにしてくれます。

テーブル要素以外に(divに)border-collapseを使用するにはどうすればいいのか？

リスト要素でもdiv要素でもなんでもいいのですが、とりあえずdiv要素でborder-collapseを使うとすると、まず親要素にdisplay: table;を指定し子要素にはdisplay: table-cell;を指定します。

<style>
  .container{
    display: table;
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
  }
  .container div{
    display: table-cell;
    border: solid 1px;
    width: calc(100% / 3);
  }
</style>
<div class="container">
  <div>sample1</div>
  <div>sample2</div>
  <div>sample3</div>
</div>

これで子要素のdivの境界線の重なりは1つになります。ただこれの問題は子要素にdisplay: table-cell;を指定することで子要素が横並びになってしまうことです。

子要素を立て並びにしたままborder-collapseで境界線をひとつにする方法はたぶんないと思います。もしかしたらあるかもしれないですが。