以前、「【CSS】tableのセルのわずかな隙間をなくす方法」という記事を投稿しましたが、今回はその逆でテーブルセルの間に間隔をあける方法です。
データ入力欄を <table> タグで作成したのですが、セルの間隔が詰まりすぎていて見た目がいまいちだったので、この方法を使って調整しました。
CSS プロパティは border-spacing と border-collapse を使います。
サンプルコードはこちら。
<table> <tr><th>見出し1</th><td>データ1</td></tr> <tr><th>見出し2</th><td>データ2</td></tr> <tr><th>見出し3</th><td>データ3</td></tr> </table>
table {
border-collapse: separate;
border-spacing: 10px;
}
ポイントは、border-collapse: separate; です。
セル間隔は border-spacing プロパティで指定しているのですが、この指定を有効にするには border-collapse プロパティに separate という値を指定する必要があります。
この border-spacing プロパティとは、隣接するセルの境界線の間隔をあけて表示するかどうかの指定が行えるもので、値が separate だと、セルの境界線の間隔をあけて表示します。
追加する必要があるプロパティは以上の 2行のみです。
あとは、border-spacing プロパティに任意の値を設定してください。
なお、border-spacing: 20px 5px; のように指定し、左右の間隔は 20px、上下の間隔は 5px とする指定の方法もあります。
ページのデザインに合わせてご活用ください。
最初、余白だから padding か marging を使えば OK かな？と、以前にもやらかしたミスを再度やってしまいました。
<table> タグは便利ですが、余白に関しては若干の癖があるように思いますね。
以上、<table> タグで作成した表のセル間隔をあける方法でした。
ご参考になれば幸いです。
