[CSS]border-spacingで枠線の間隔を上下左右にセットする

2021年11月1日

書式
border-spacing : 値    上下左右を指定
border-spacing : 値 値  左右と上下を指定

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<style>
table {
border-collapse: separate;
border-spacing: 5px;
width: 120px;
border: 1px solid #000;
}
td {
border: 1px solid #000;
}
</style>
<table>
<tr>
<td>1</td>
<td>AA01</td>
</tr>
<tr>
<td>2</td>
<td>BB02</td>
</tr>
<tr>
<td>3</td>
<td>CC03</td>
</tr>
</table>
<style> table { border-collapse: separate; border-spacing: 5px; width: 120px; border: 1px solid #000; } td { border: 1px solid #000; } </style> <table> <tr> <td>1</td> <td>AA01</td> </tr> <tr> <td>2</td> <td>BB02</td> </tr> <tr> <td>3</td> <td>CC03</td> </tr> </table>
<style>
  table {
    border-collapse: separate;
    border-spacing: 5px;
    width: 120px;
    border: 1px solid #000;
  }
  td {
    border: 1px solid #000;
  }
</style>
<table>
  <tr>
    <td>1</td>
    <td>AA01</td>
  </tr>
  <tr>
    <td>2</td>
    <td>BB02</td>
  </tr>
    <tr>
    <td>3</td>
    <td>CC03</td>
  </tr>
</table>

 

CSS

Posted by arkgame