[Resolved] Table formatting

[Scott]

Hi
Have been formatting my tables and have a couple of final issues I can’t figure out:
1) Why do I have a white space at the bottom of the table between the table and the border?
2) How can I add a dark border (same as outer table border) around the first column and the first row?

here’s the CSS I’m currently using:
.wp-block-table {
font-size: 14px;
}
.wp-block-table tbody tr:nth-child(2n+1) {
background-color: #f1f1f1;
}
.wp-block-table tbody tr:nth-child(2n+2) {
background-color: #f7f7f7;
}
.wp-block-table {
border: 1px solid #000;
border-color: grey;
}

[Elvin]

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;
}

[Scott]

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?

[Elvin]

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;
}

[Scott]

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.

[Elvin]

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;
}

[Scott]

Perfect, thanks!

[Elvin]

No problem. 😀

[Author]

Posts