How to Remove Spacing Between Table Borders with CSS

After way too much research, trial and error I found a way that seems to works fine and doesn’t have those space in it.When you use CSS to put a border on your <th> and <td> tags, you will notice that you get space between them. In the old days, you would remove that space using the now-deprecated cellspacing attribute. These days, you do it with the CSS border-collapse property.

HTML:

<table>
  <thead>
    <tr>
      <th>Header</th>
      <th>Header</th>
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
  </tfoot>
</table

CSS:

<style>
th, td {
  border: 1px solid #006;
}
table {
  border-collapse: collapse;
}
</style>

As easy as ABC