[Resolved] Gutenberg stripes table conflict with GP css

Home Forums Support Gutenberg stripes table conflict with GP css

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1317827
    Natalie

    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

    #1318053
    David
    Staff
    Customer Support

    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;
    }
    #1318834
    Natalie

    Perfect – thanks David.

    #1318962
    David
    Staff
    Customer Support
    #1337963
    Radu

    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.

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.