border-collapse
セルの罫線の表示方法を指定するプロパティ。
border-collapseの値により、セルの罫線を重ねて表示させるか、離して表示させるかを指定することができる。
値
| separate | セルの罫線を離して表示。 |
|---|---|
| collapse | セルの罫線を重ねて表示。 |
使用例 - サンプル(A) / サンプル(B)
サンプル(A)
[CSSの記述]
.sampleA { border:solid 1px #00c; border-collapse: separate; }
.sampleA td { border:solid 1px #c00; }
[HTMLの記述]
<table class="sampleA"> <tr><th>1着</th><td>ディープインパクト</td><td>武豊</td></tr> <tr><th>2着</th><td>ポップロック</td><td>O.ペリエ</td></tr> <tr><th>3着</th><td>ダイワメジャー</td><td>安藤勝己</td></tr> </table>
[ブラウザ上の表示]
| 1着 | ディープインパクト | 武豊 |
| 2着 | ポップロック | O.ペリエ |
| 3着 | ダイワメジャー | 安藤勝己 |
サンプル(B)
[CSSの記述]
.sampleB { border:solid 1px #00c; border-collapse:collapse; }
.sampleB td { border:solid 1px #c00; }
[HTMLの記述]
<table class="sampleB"> <tr><th>1着</th><td>ディープインパクト</td><td>武豊</td></tr> <tr><th>2着</th><td>ポップロック</td><td>O.ペリエ</td></tr> <tr><th>3着</th><td>ダイワメジャー</td><td>安藤勝己</td></tr> </table>
[ブラウザ上の表示]
| 1着 | ディープインパクト | 武豊 |
| 2着 | ポップロック | O.ペリエ |
| 3着 | ダイワメジャー | 安藤勝己 |
- 前の記事：caption-side
- 次の記事：border-spacing