WordPress Table Styling

  • itsnathanham

    (@itsnathanham)


    3 years, 6 months ago

    I’d like to make some styling updates to the WordPress tables sitewide but I can’t figure out how to get the CSS to work with my theme.

    1.) Set even and odd rows to alternating colors.
    Even: #ffffff
    Odd: #f3f3f3

    2.) Set the table border radius to 4px.

    3.) Style the header background to #555555.

    4.) Fix the mobile responsiveness problems on page today. Firstly, tables with many columns run outside the width of the content area. I’d also prefer to force side scroll.

    For reference, the most relevant table example is found below the offer tiles on page in the H2 section named Comparing the best gaming monitors.

    Note, I tried a few attempts in the style.css file to no avail.

    Thanks in advance for your help!

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • willsonwanda

    (@willsonwanda)

    3 years, 6 months ago

    How To Style A WordPress Table Using CSS
    Table header styling.
    Table rows styling.
    Styling columns.
    Search bar alignment.

    Thread Starter itsnathanham

    (@itsnathanham)

    3 years, 6 months ago

    Thx for your reply. Fwiw, I know much of the code to achieve the above I just can’t figure out the selector, I think it’s called. I’ve tried wp-table-block, .table, table, div.table, #table, etc. but it’s not working, using !important or not on each item. Knowing how someone would code even just one of the items above sitewide would give me enough info to handle the rest.

    Moderator bcworkz

    (@bcworkz)

    3 years, 6 months ago

    Use your browser’s element inspector tool to see what selectors your theme is using. Use the same one’s to override theme styling. The override rules can be kept in the customizer’s Additional CSS section. Styles there will take precedence over equivalent rules in external files.

    The table head isn’t using th tags, so you’d need to use the :first-child pseudo-selector. For odd/even rows, use :nth-child(odd) and similar for even. Place the first child head styling after the odd rule so it overrides the initial odd row. You might even need the !important modifier.

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

The topic ‘WordPress Table Styling’ is closed to new replies.

Tags