「CSS」separateでテーブルの枠線を離して表示する

2021年9月15日

構文
border-collapse: separate;
separate
隣接するセルが個別に境界線を持ちます (separated-border 表レンダリングモデル)。

使用例

<style>
  /* 枠線を離して表示 */
.separate {
  border-collapse: separate;
}
table {
  display: inline-table;
  margin: 1em;
  border: dashed 5px;
}

table th,
table td {
  border: solid 1px;
  width: 100px;
}
</style>
<table class="separate ">
  <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>