【CSS Modules】border-collapseプロパティの使い方
border-collapseプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
border-collapseプロパティは、HTMLの<table>要素において、セル（<td>や<th>）の境界線（ボーダー）の表示方法を制御するプロパティです。このプロパティは、隣接するセルのボーダーを個別に表示するか、それとも結合して一体的に表示するかを設定するために使用されます。
指定できる主な値は二つあります。一つはデフォルト値であるseparateです。separateを指定すると、各セルのボーダーは独立して描画され、セルとセルの間に隙間が生じます。この隙間の大きさは、同じく<table>要素に適用されるborder-spacingプロパティによって調整することができます。また、empty-cellsプロパティもseparateが指定されている場合にのみ効果を発揮します。
もう一つの値はcollapseです。collapseを指定すると、隣接するセルのボーダーが結合され、単一のボーダーとして表示されます。これにより、テーブルの罫線がすっきりとした印象になり、視覚的な一体感が生まれます。ボーダーが結合される際には、複数のボーダースタイルが競合する場合、より「太い」「実線に近い」「色相が小さい」などの優先順位に基づいて、最も優先度の高いスタイルが適用されます。
このプロパティを適切に利用することで、テーブルのデザインを柔軟に制御し、ウェブページのレイアウトやユーザーインターフェースの見た目を向上させることが可能です。特に、モダンなウェブデザインにおいて、テーブルの視覚的な整合性を高めるために重要な役割を果たします。
公式リファレンス: border-collapse
構文(syntax)
1table { 2 border-collapse: collapse; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません