CSS tableにborder-spacingを指定してセル間の余白を設定する

2022年10月27日

環境
Google Chrome　106.0.5249.119
Windows 10 Home 64bit

構文
border-spacing : 値
border-spacingは、テーブルの上下左右の枠線の間隔を表します。

「border-spacing」を使って、テーブルのセル間の余白を設定します
border-spacing は CSS のプロパティで、<table> における隣り合うセルの境界同士の間隔を定めます。このプロパティは border-collapse が separate のときのみ適用されます。

使用例

<!DOCTYPE html>
<html>
<head>
<style>
/*table要素のクラスの定義*/
.cft {
    /*セル間の余白*/
    border-spacing: 20px;
    border: 1px solid skyblue;
}
/* table要素のtdタグの定義*/
.cft td{
    border: 1px solid red;
}
</style>
</head>
<body>
<table class="cft">
    <tr>
        <td>A11</td>
        <td>A12</td>
    </tr>
    <tr>
        <td>B11</td>
        <td>B12</td>
    </tr>
</table>

</body>
</html>

CSS

Posted by arkgame

関連記事: