表 - 如何在TD之间获取空间

Question

我创建了一个在TD中有圆圈的表格。请在HERE

查看此示例

我希望通过尝试在CSS中添加更多样式来获取这些圈子之间的空格

border-spacing: 10px;
border-collapse: separate;

但不知何故它没有显示空格。请帮忙！

以下是代码：

table tr td{
    background-color:green;
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    border-spacing: 10px;
    border-collapse: separate;
}

<table>
  <tr>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
  </tr>
    <tr>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
  </tr>
</table>

Answer 1

border-spacing和border-collapse应设置在table上，而不是td。

＆＃13;

＆＃13;

table {
  border-spacing: 10px;
  border-collapse: separate;
}

table tr td{
    background-color:green;
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
}

＆＃13;

<table>
  <tr>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
  </tr>
    <tr>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;