【CSS】Table要素の一部にだけ指定したBorderがはみ出る

久しぶりに HTML & CSS を扱ったら、かなり手こずった箇所があったので備忘録としてまとめ。
タイトル通り、<table> 要素に border プロパティで一部分にだけ枠線をつけたら、指定していない所にまで線がはみ出したのでその対処法についてです。

具体的には下記のようになりました。

理想はこちら。

内容と備考の間の余白部分にまで線がはみ出ました…。
見出しと本文のカラムにしか枠線を指定していないのに…。

で、対処法ですが、見出し1 と 見出し2 の間の空白行の部分のセルを colspan を使用して結合していたのですが、それをやめて <td> を複数個指定するようにしたら直りました。
具体的には下記のとおりです。

<table border="0">
  <tr><th colspan="2" id="title">タイトル</th><td class="width5"></td><td></td></tr>
  <tr><td class="head">見出し1</td><td class="notes">内容1</td><td></td><td>備考1</td></tr>
  <tr><td colspan="3"></td><td>備考2</td></tr>
  <tr><td class="head">見出し2</td><td class="notes">内容2</td><td></td><td>備考3</td></tr>
</table>

4行目で <td colspan="3"></td> を使用してセルを横方向に結合しています。

<table border="0">
  <tr><th colspan="2" id="title">タイトル</th><td class="width5"></td><td></td></tr>
  <tr><td class="head">見出し1</td><td class="notes">内容1</td><td></td><td>備考1</td></tr>
  <tr><td></td><td></td><td></td><td>備考2</td></tr>
  <tr><td class="head">見出し2</td><td class="notes">内容2</td><td></td><td>備考3</td></tr>
</table>

それを <td></td><td></td><td></td> に変更しました。
修正箇所は以上です！

線がはみ出しているのが colspan を指定したセルに接している部分だったので、colspan が悪さをしているのでは？ という考えだったのですが…当たっていてよかったです！
試してはいませんが… rowspan でも起きそうですね…。

ちなみに CSS は下記のとおりです。

table {
  margin: 20px;
  width: calc(100% - 40px);
  border-collapse: collapse;
}
.head {
  width: 15%;
  border: 1px solid #999;
}
.notes {
  border: 1px solid #999;
  width: 30%;
}
.width5 {
  width: 5%;
}

で、その後判明したのですが、<table> 要素に border-collapse: collapse; を指定していると、上記のような現象が発生するようです。
試しに border-collapse: separate; に変更してみると、線ははみ出しませんでした。
……バグでは…？

以上、<table> 要素の一部分に Border を指定したら、範囲外にまで線がはみ出した時の対処法でした。
ご参考になれば幸いです。