Create visible gaps between table rows in CSS

Setting margin and/or padding won’t work, as td is inline. Setting td to display: block ruins the table layout.

Here’s the simplest way to create visual gaps between table rows:

table {
  /* Add visual row gaps */
  border-collapse: separate;
  border-spacing: 0 1rem;
  /* Remove byproduct visual gap above and below table */
  margin-top: -1rem;
  margin-bottom: -1rem;
}

Source