表の境界線の表示、セル間隔を指定する
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は適用されません。