- This topic has 7 replies, 2 voices, and was last updated 4 years, 1 month ago by
.
-
Posts
-
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;
}Customer Support
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. 😀
- You must be logged in to reply to this topic.
