表の境界線の表示、セル間隔を指定する

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は適用されません。

コメントを投稿する

SPONSORED LINK

CATEGORY

RECOMMEND BOOKS

OTHER

あわせて読みたい

トップへ戻る