スポンサード リンク
border-collapseプロパティ
table要素の枠線の表示方法を指定できます使い方(書式)
セレクタ { border-collapse: 値; }
border-collapseプロパティ
対応ブラウザ | |
適用できる要素 | table要素 |
子要素へのスタイルの継承 | する |
プロパティの値 | 説明 |
collapse | セルの枠線を一体化する |
separate | セルごとに枠線を表示。これが初期値 |
実際の指定方法
.hoge { border-collapse: collapse; } /* 表の枠線を一体化できます */
.hoge2 { border-collapse: separate; } /* セルごとに枠線を表示 */
html部分
<p>実際の表示</p> <p>実際の表示 値がcollapse 表の枠線を一体化</p> <table class="hoge"> <tr> <td>collapse</td> <td>collapse</td> </tr> <tr> <td>collapse</td> <td>collapse</td> </tr> </table> <p>実際の表示 値がseparate セルごとに枠線を表示</p> <table class="hoge2"> <tr> <td>separate</td> <td>separate</td> </tr> <tr> <td>separate</td> <td>separate</td> </tr> </table>
実際の表示 値がcollapse 表の枠線を一体化
collapse | collapse |
collapse | collapse |
実際の表示 値がseparate セルごとに枠線を表示
separate | separate |
separate | separate |