Archived topic
Gutenberg stripes table conflict with GP css
4 replies · Started by Natalie on June 7, 2020
Gutenberg has a 'table' block with a style option of 'Stripes' which makes the table rows alternate colours.
The table is wrapped in a 'figure' tag which gets a css class of .is-style-stripes
WP sets
.wp-block-table.is-style-stripes td{
border-color: transparent;
}But the GP theme is using
td {
border-width: 0 1px 1px 0;
}in conjunction with:
table {
border-width: 1px 0 0 1px;
to set the inner and outer borders for the table.
This means the striped table ends up with a top and left border only as per this image
https://u.pcloud.link/publink/show?code=XZEhXEkZT6W71SeVgbHxLyjAvHda8LsRdz7V
What do you suggest is the best css to use to get around this?
Thanks
Hi there,
do you just want the outer table border ?
If so i would probably do this:
.wp-block-table.is-style-stripes table {
border-width: 1px;
}Perfect - thanks David.
You're welcome
Hello!
I just wanted to pop in and say that Natalie's right. Currently, when adding a Gutenberg table with the Stripes style, it only has left and top borders, as in the screenshot shown by her.
I switched to Twenty Twenty and it shows properly.
