【CSS】border-spacing - 表セル間の隙間幅

CSSのborder-spacingプロパティについて解説します。

検証環境

CSS

macOS

14.1

border-spacing

border-spacingは“表セル間の隙間幅”のプロパティです。

基本構文

値の個数によって２パターンの構文があります。

値：１個

値が１個の場合、上下左右の隙間幅に適用します。

border-spacing: 値;

値：２個

値が２個の場合、最初の値を左右、次の値を上下の隙間幅に適用します。

border-spacing: 値1 値2;

サンプル

sample.html

<style>
table {
    ___ih_hl_start
    border-spacing: 20px 50px;
    ___ih_hl_end
}
td {
    border: 1px solid black;
}
</style>

<table>
    <tr>
        <td>Language</td>
        <td>Type</td>
    </tr>
    <tr>
        <td>HTML</td>
        <td>Markup</td>
    </tr>
    <tr>
        <td>CSS</td>
        <td>Programming</td>
    </tr>
    <tr>
        <td>JavaScript</td>
        <td>Programming</td>
    </tr>
</table>

プレビュー