• Resolved skyecade

    (@skyecade)


    Hello,

    I’m trying to style multiple tables at once.

    For example, I have a template table that I want to use solely for “verbs” throughout. So I added a class “verb” to the Extra CSS Classes section and then I added this code to the custom CSS section:

    /*Change the color of hovered over rows in verb tables*/
    .tablepress .row-hover .verb tr:hover td {
    	background-color: #00ff00;
    }

    This did not change the hover color. However, when I remove the .verb it does change the hover color for all the tables on the site.

    I looked at the HTML source and it did add the following:

    <table id="tablepress-8" class="tablepress tablepress-id-8 verb">

    I’m no expert in CSS as you can tell. Any advice would be greatly appreciated.

    Thanks,

    Bob

    https://www.ads-software.com/plugins/tablepress/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi Bob,

    thanks for your post, and sorry for the trouble.

    You are very close already, actually. You’ll basically just have to replace the native TablePress CSS selectors (.tablepress and .tablepress-id-123) with your “Extra CSS class”. Thus, please try

    /* Change the color of hovered over rows in verb tables*/
    .verb .row-hover tr:hover td {
    	background-color: #00ff00;
    }

    Every table with that “Extra CSS class” will then get that background color on hover, while the other tables will not be affected by this.

    Regards,
    Tobias

    Thread Starter skyecade

    (@skyecade)

    That worked great! Thanks for the help and the lesson. ??

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    no problem, you are very welcome! ?? Good to hear that this helped!

    Best wishes,
    Tobias

    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How can I style multiple tables using Extra CSS Classes?’ is closed to new replies.