CSS ・ リスト・テーブル
border-collapse
表の枠線を重ねるか離すか（border-spacing）
表（table）のセルの枠線を、1本に重ねるか、離して表示するかを指定します。離す場合の間隔は border-spacing で指定します。
01
サンプルコード
HTML
1<table class="separate">
2 <tr><td>separate</td><td>離す</td></tr>
3</table>
4<table class="collapse">
5 <tr><td>collapse</td><td>重ねる</td></tr>
6</table>
CSS
1table {
2 margin-bottom: 10px;
3}
4td {
5 padding: 6px 12px;
6 border: 1px solid #b68235;
7}
8.separate {
9 border-collapse: separate;
10 border-spacing: 6px;
11}
12.collapse {
13 border-collapse: collapse;
14}
02
実行結果
ブラウザでの表示
03
解説
border-collapse は、表の隣り合うセルの枠線をどう表示するかを決めるプロパティです。table 要素に指定します。
初期値の separate では、セルごとに枠線が付き、セルとセルの間にすき間ができます。そのすき間の大きさを決めるのが border-spacing です。
collapse にすると、隣り合う枠線が1本に重なります。一般的な表は、この collapse にして作ります。
04
応用例・注意点
指定できる値
| プロパティ / 値 | 説明 |
|---|---|
border-collapse: separate | セルの枠線を離す（初期値） |
border-collapse: collapse | 隣り合う枠線を1本に重ねる |
border-spacing: 6px | セルどうしの間隔（separate のときだけ効く） |
border-spacing: 10px 4px | 横の間隔・縦の間隔 |
基本の表のスタイル
枠線を重ね、幅いっぱいに広げた、よく使う形です。
HTML
1<table>
2 <tr><th>名前</th><th>価格</th></tr>
3 <tr><td>コーヒー</td><td>400円</td></tr>
4</table>
CSS
1table {
2 width: 100%;
3 border-collapse: collapse;
4}
5th, td {
6 padding: 8px 12px;
7 border: 1px solid #ddd;
8}
注意点
- 01collapse にすると border-spacing は効きません。
- 02collapse のとき、table に付けた border-radius は効きません。角を丸くしたいときは separate のまま border-spacing: 0 にします。