CSS border-spacingでーブルの枠線の間隔を指定するサンプル

環境
Google Chrome 111.0.5563.65(Official Build)
Windows 10 Home 64bit

書式
border-spacing : 値
上下左右を指定してテーブルの枠線の間隔を表します。
値は数値+単位(px等)を設定します。継承します。

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: separate;
border-spacing: 2px; /*上下左右を指定*/
width: 100px;
background: red;
}
td {
background: white;
}
</style>
</head>
<body>
<table>
<tr>
<td>111</td>
<td>東京</td>
<td>tokyo</td>
</tr>
<tr>
<td>2222</td>
<td></td>
<td>blue</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html> <html> <head> <style> table { border-collapse: separate; border-spacing: 2px; /*上下左右を指定*/ width: 100px; background: red; } td { background: white; } </style> </head> <body> <table> <tr> <td>111</td> <td>東京</td> <td>tokyo</td> </tr> <tr> <td>2222</td> <td>青</td> <td>blue</td> </tr> </table> </body> </html>
<!DOCTYPE html>
<html>
<head>
<style>
  table {
    border-collapse: separate;
    border-spacing: 2px; /*上下左右を指定*/
    width: 100px;
    background: red;
  }
  td {
    background: white;
  }
</style>
</head>
<body>

<table>
  <tr>
    <td>111</td>
    <td>東京</td>
     <td>tokyo</td>
  </tr>
  <tr>
    <td>2222</td>
    <td>青</td>
    <td>blue</td>
  </tr>
</table>

</body>
</html>

結果
背景色としてtableに赤、tdに白を指定しています。border-spacingは2pxです。

CSS

Posted by arkgame