CSS tableにborder-spacingを指定してセル間の余白を設定する
環境
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>