BugWP logo BugWP
Back to Community
Home / Community / Plugin → Tablepress – tables in wordpress made easy

How to Change Table Header Row Colors in TablePress with Custom CSS

20 threads Sep 16, 2025 Plugin → Tablepress – tables in wordpress made easy

Content

One of the most common styling challenges users face with the TablePress plugin is customizing the appearance of their table header rows. Whether you want to match your brand colors, improve readability, or simply change the default blue, this guide will walk you through the process using Custom CSS.

Why You Might Need to Change Header Row Colors

The default TablePress styling uses a light blue header row. While functional, it often doesn't align with a website's specific color scheme or branding requirements. Based on numerous community threads, users frequently need to:

  • Match header colors to their brand identity
  • Improve contrast for better accessibility
  • Apply different header colors to specific tables on certain pages
  • Create visual hierarchy with multiple header rows

How to Change the Header Row Background Color

The primary method for changing header row styling in TablePress is through the plugin's "Custom CSS" feature. This approach works for both background colors and text colors.

Basic CSS Code for All Tables:

.tablepress thead th {
    background-color: #YOUR_COLOR_CODE !important;
    color: #YOUR_TEXT_COLOR_CODE !important;
}

CSS Code for a Specific Table:

.tablepress-id-N .thead th {
    background-color: #YOUR_COLOR_CODE !important;
    color: #YOUR_TEXT_COLOR_CODE !important;
}

Replace "N" with your table ID (found in the table's shortcode) and use hexadecimal color codes for your desired colors.

Advanced Customization Examples

Changing Header Color for Tables on a Specific Page:

.page-id-123 .tablepress thead th {
    background-color: #E65D91 !important;
}

Creating Multiple Header Rows with the Same Color:

.tablepress-id-SPA51 .row-4 td,
.tablepress-id-SPA51 .row-8 td,
.tablepress-id-SPA51 .row-12 td {
    background-color: #d9edf7 !important;
}

Troubleshooting Common Issues

CSS Not Working:

  • Ensure you're using the correct table ID in your CSS selector
  • Check that your color codes are in the correct hexadecimal format
  • Add !important to override other CSS rules that might be interfering
  • Clear your browser and website cache after making changes

Theme Conflicts:

Some WordPress themes may override TablePress styles. If your custom CSS isn't working, try using more specific CSS selectors or check if your theme has additional CSS affecting table elements.

Where to Add Custom CSS

  1. Go to your WordPress dashboard
  2. Navigate to TablePress → Plugin Options
  3. Find the "Custom CSS" text box
  4. Paste your CSS code
  5. Save changes

For more detailed CSS examples and advanced styling techniques, the TablePress team maintains a comprehensive FAQ section on their website with code snippets for various styling scenarios.

Related Support Threads Support