css：border-spacing属性（表の枠線間隔）のサンプルコード共有-CSSチュートリアル-php.cn

css：border-spacing属性（表の枠線間隔）のサンプルコード共有

黄舟

リリース： 2017-06-30 09:55:53

オリジナル

4111 人が閲覧しました

1. border-spacing attribute

tabledefault に枠線を追加することは次のようになります:

css：border-spacing属性（表の枠線間隔）のサンプルコード共有

前のセクションでテーブルの枠線を結合する (テーブルの枠線を削除する) 方法を説明しました。間隔））。ただし、実際の開発では、テーブルの境界線の間隔を設定する必要がある場合があります。

CSS では、border-spacing プロパティを使用して表の境界線の間隔を定義します。

構文:

border-spacing: ピクセル値;

説明:

この属性は、セルの境界間の距離を指定します。ピクセル値が 1 つだけ指定されている場合、この値は水平方向と垂直方向の間隔に作用します。2 つの長さの値が指定されている場合、最初の値は水平方向の間隔に作用し、2 番目の値は垂直方向の間隔に作用します。

CSS の初期段階では、すべてピクセルを単位として使用します。 CSS 応用編では、その他の CSS 単位について詳しく説明します。

例:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>border-spacing属性</title>
    <style type="text/css">
        table,th,td{border:1px solid gray;}
        table{border-spacing:5px 10px }
    </style>
</head>
<body>
    <table>
        <caption>表格标题</caption>
        <!--表头-->
        <thead>
            <tr>
                <th>表头单元格1</th>
        <th>表头单元格2</th>
            </tr>
        </thead>
        <!--表身-->
        <tbody>
            <tr>
                <td>标准单元格1</td>
                <td>标准单元格2</td>
            </tr>
            <tr>
                <td>标准单元格1</td>
                <td>标准单元格2</td>
            </tr>
        </tbody>
        <!--表脚-->
        <tfoot>
            <tr>
                <td>标准单元格1</td>
                <td>标准单元格2</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

ログイン後にコピー

ブラウザでのプレビュー効果は次のとおりです:

css：border-spacing属性（表の枠線間隔）のサンプルコード共有