Right now, I have a <table> element that has border-spacing: 22px 0px and border-collapse: separate. I also give the <td> elements inside the table a border.
As seen in this image, this correctly gives all my table cells a border while giving the columns some spacing between them. The columns also have a uniform white background where their isn’t an item in a cell.

What I would like is to give some spacing between the rows, which I know I can do for my <table> with border-spacing: 22px 10px. As seen in the image here, the problem is the columns do not stay uniform with an unending border. I want the spacing between the rows but I want the space where the column is to be connected by a border and have a uniform background. The end result should look something like this.

If I could give the <tr> a margin-bottom or padding-bottom that would work but I am not allowed to in CSS. Does anyone have any ideas on how to get this to work? Thank you!