Table formatting

Hi Scott,

For #1:

The theme adds a margin bottom to the <table> tag by default, and since you've added a border to its parent element, the margin is now more obvious.

It's this CSS from main.css:

table {
    margin: 0 0 1.5em;
    width: 100%;
}

But you can always override this with custom CSS by doing this:

.wp-block-table table{
margin-bottom: 0 !important;
}

For #2:

Try this CSS:

.wp-block-table tbody tr:first-child td {
    border-bottom-color: black !important;
}

Thanks Elvin, I've added your suggested CSS.
A couple of follow up questions:
1) The bottom of the table now appears too close to the following element (heading). Any way to add a margin/padding below the bottom border?
2) This added a border to the first row, is there a way to add one to the first column also?

For #1:

We can move the margin to the main container which can be done with this:

.wp-block-table {
margin-bottom: 1.5em;
}

For #2:

You can adjust the CSS:

Try this:

.wp-block-table tbody tr:first-child td {
    border-bottom-color: black !important;
border-right-color: black !important;
}

Thanks Elvin.
1) This didn't seem to change anything
2) This added more borders to the top row but not the first column
I have saved with both so you can see the impact.

For #1:

Let's modify the selector a bit and increase the margin so it's more obvious.

figure.wp-block-table:not(:last-child) {
    margin-bottom: 3em !important;
}

For #2:

Ah that's right.

Do this instead:

.wp-block-table tbody tr:first-child td {
    border-bottom-color: black !important;
}

.wp-block-table tbody tr td:first-child {
    border-right-color: black !important;
}

Perfect, thanks!

No problem. :D