How to create a gap between rows in a table with CSS?

Sometimes, we want to create a gap between rows in a table with CSS.

In this article, we’ll look at how to create a gap between rows in a table with CSS.

How to create a gap between rows in a table with CSS?

To create a gap between rows in a table with CSS, we set the border-collapse and border-spacing properties.

For instance, we write

table {
  border-collapse: separate;
  border-spacing: 0 1em;
}

to add border-collapse: separate; to let us add spacing between cells.

Then we add border-spacing: 0 1em; to add spacing between cells.

Conclusion

To create a gap between rows in a table with CSS, we set the border-collapse and border-spacing properties.