How to set cell padding and cell spacing in CSS

The Problem

You have a table such as the table shown below:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Location</th>
  </tr>
  <tr>
    <td>Jessie</td>
    <td>22</td>
    <td>Brazil</td>
  </tr>
  <tr>
    <td>Luke</td>
    <td>30</td>
    <td>England</td>
  </tr>
  <tr>
    <td>Samantha</td>
    <td>24</td>
    <td>Cambodia</td>
  </tr>
</table>

The <td> elements, which define the cells of the table that contain data, have a border so that you can see the table cells:

td {
  border: 1px solid black;
}

How do you set the padding inside the cells and the spacing between the cells?

The Solution

To set the cell padding, set the padding of the <td> elements:

td {
  padding: 1rem;
}

To set the spacing between cells, set the border-spacing property of the <table> element:

table {
  border-spacing: 30px;
}

Note that border-spacing does not have any effect if the border-collapse property of the <table> element is set to “collapse”. The border-collapse property determines whether the cells share borders or have separate borders. When set to “collapse”, the cells share borders.