How to Style Table Block

  • Resolved Thea

    (@dorothy1508)


    4 years, 10 months ago

    I am trying to add padding to the Table Block and also change the width of the table.

    I’d prefer to put something in “Additional CSS” so it will change all tables on the site, but I’ll settle for styling each table on the page as a last resort.

    I have tried some ideas from other posts but having no luck.

    • This topic was modified 4 years, 10 months ago by Thea.

    The page I need help with: [log in to see the link]

Viewing 11 replies - 1 through 11 (of 11 total)
  • Stef

    (@serafinnyc)

    4 years, 10 months ago

    Simply add this

    table{
 width:100%;
 margin-top:2rem

}
table td{
	padding:1em !important;
}
    Thread Starter Thea

    (@dorothy1508)

    4 years, 10 months ago

    Do you mean in Additional CSS? I tried it in Additional CSS and it did nothing.

    I did read somewhere that because the Table Block is wrapped in a figure, additional CSS won’t work – but it was only one post and I can’t find it now.

    • This reply was modified 4 years, 10 months ago by Thea.
    • This reply was modified 4 years, 10 months ago by Thea.
    Stef

    (@serafinnyc)

    4 years, 10 months ago

    Yes, add it there. But add this after the two rules inside the table selector. 

    
!important;
    Thread Starter Thea

    (@dorothy1508)

    4 years, 10 months ago

    Sorry, I don’t understand what you mean.

    Stef

    (@serafinnyc)

    4 years, 10 months ago

    Add it like this. Have you tried clearing your cache? This worked for me.

    Make sure you clear cache on your server and your browser. 

    
table{
 width:100% !important;
 margin-top:2rem !important;

}
table td{
 padding:1em !important;
}
    Thread Starter Thea

    (@dorothy1508)

    4 years, 10 months ago

    Thanks, still not working. I would expect that to work fine but it has no effect at all, even with cache cleared.

    Stef

    (@serafinnyc)

    4 years, 10 months ago

    Can you post a screenshot shot of where you placed this?

    Stef

    (@serafinnyc)

    4 years, 10 months ago

    You must’ve added it incorrectly. I can see that your odd even rows are gone now. They were there when you initially posted this. On top of that I don’t even see my snippet anywhere in console.

    Thread Starter Thea

    (@dorothy1508)

    4 years, 10 months ago

    Thanks for your patience but I can’t see how to post a screenshot here.

    I’m posting it in Appearance–>Customise–>Additional CSS. Currently my additional CSS section looks like this:

    `.posted-on {
    display: none;
    }

    img[class*=”wp-image-“] {
    margin-top: .25em;
    margin-bottom: 1em;
    box-shadow: none;
    border-radius: 2px;
    border: none;
    padding: 5px;

    table{
    width:100% !important;
    margin-top:2rem !important;

    }
    table td{
    padding:1em !important;
    }

    Stef

    (@serafinnyc)

    4 years, 10 months ago

    You’re missing a bracket after padding:5px. That’s why this isn’t working.

    Add a curly bracket. This one

    }

    • This reply was modified 4 years, 10 months ago by Stef.
    Thread Starter Thea

    (@dorothy1508)

    4 years, 10 months ago

    I’m so sorry, what a silly mistake! Thank you.

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘How to Style Table Block’ is closed to new replies.