TABLE - How To Get Spaces in Between TDs

Question

I create a table having circles in TDs. Please take a look at this sample at HERE

I want to get spaces in between these circles by trying to add more style in CSS

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

but somehow it doesn't show up spaces. Please help!

Below is the code:

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>

score 2 · Accepted Answer · answered Feb 17 '16 at 21:17

border-spacing and border-collapse should be set on the table, not the td.

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

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

<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>

TABLE - How To Get Spaces in Between TDs

1 Answers1