🔹 意味
テーブルの セル同士の枠線(border)を「重ねずに1本にまとめる」 という指定です。
CSS で <table> 要素に適用するプロパティ です。
🔹 デフォルトとの違い
通常(border-collapse: separate; がデフォルト)では:
- 各セルの border が 独立 して表示される
- 枠線が「二重線」みたいに見えることがある
🔹 collapse を指定すると
- 隣り合うセルの border が「1本」に統合される
- 見た目がスッキリして、表っぽいデザインになる
🔹 例
<table class="tbl">
<tr>
<td>セル1</td>
<td>セル2</td>
</tr>
<tr>
<td>セル3</td>
<td>セル4</td>
</tr>
</table>
.tbl {
border: 1px solid black;
border-collapse: collapse; /* ← これ */
}
.tbl td {
border: 1px solid black;
padding: 8px;
}
👉 この場合、セルの境界線は 二重にならず 1 本 で表示されます。
💡 まとめると:
border-collapse: collapse; は テーブルのセルの境界線をまとめてスッキリ見せる指定 です。