表の境界線の表示、セル間隔を指定する
tableタグで表を作成する際、
CSSで境界線の表示方法、セル間隔の指定をすることができます。
境界線を重ねる場合
| 会社名 | サンプル会社 |
|---|---|
| 代表者名 | サンプル太郎 |
| 所在地 | サンプル県サンプル市 |
.style1 {
border-collapse: collapse;
}
.style1 th {
background-color:#CCC;
width:100px;
border:solid 1px #666;
padding:5px;
}
.style1 td {
width:400px;
border:solid 1px #666;
padding:5px;
}
境界線を離して間隔をあける
| 会社名 | サンプル会社 |
|---|---|
| 代表者名 | サンプル太郎 |
| 所在地 | サンプル県サンプル市 |
.style2 {
border-collapse: separate;
border-spacing:10px;
}
.style2 th {
background-color:#CCC;
width:100px;
border:solid 1px #666;
padding:5px;
}
.style2 td {
width:400px;
border:solid 1px #666;
padding:5px;
}
※border-spacingプロパティはborder-collapse: separate;の指定がある場合に有効となります。
指定が無い場合はborder-spacingは適用されません。
