「CSS」collapseでテーブルの枠線を重ねて表示する

2014年6月7日2021年9月15日

構文
border-collapse: collapse;
CSS の border-collapse プロパティは、 <table> の中のセルが境界線を共有するか分離するかを設定します。
collapse
隣接するセルで境界線を共有します (collapsed-border 表レンダリングモデル)。
使用例

<style>
   /* 枠線を重ねて表示 */
.collapse {
  border-collapse: collapse;
}
table th,
table td {
  border: solid 2px;
  width: 100px;
}
</style>
<table class="collapse">
  <tr>
    <td>1001</td>
    <td>item Aaa</td>
  </tr>
  <tr>
    <td>2002</td>
    <td>item Bbb</td>
  </tr>
    <tr>
    <td>3003</td>
    <td>item Ccc</td>
  </tr>
</table>