Tablepress CSS Styles: Upgrade your WordPress tables

Tablepress is by far the most popular WordPress table plugin, and it’s completely free. TablePress is flexible enough to create almost any type of table, but the default CSS styles are pretty bland.

One of my pet peeves is seeing a default Tablepress table on a website, without even minor styling upgrades to match the website’s theme.

So let’s change that.

You’ll learn: Learn how to style your TablePress tables using CSS, to make them more beautiful, useful and responsive.

Where to write your CSS code for TablePress?

There are so many different places to add custom CSS on your site, which one is best? For me, there are two obvious locations to consider (plus a few other options).

1. TablePress Plugin Options (preferred)

TablePress actually has it’s own built-in solution for adding custom CSS. It’s hidden in the plugin options menu, however, so you may not have found it. One minor annoyance is the design of the text box, that doesn’t auto-size to the content while you’re adding code.

Tablepress custom CSS in plugin options

Why is this the best method? Because it only inserts the CSS code on posts where the Tablepress shortcode is executed. The styles won’t be loaded on other pages, saving you precious milliseconds of load time.

2. Other places for CSS code

There are a plenty of other ways to add CSS code to your site too. The obvious choice is the WordPress Customizer, which has an ‘additional CSS’ section.

Your theme may also have a custom CSS feature, or you can use popular CSS plugins like SimpleCSS or Custom CSS Pro.

Keep in mind: Most CSS plugins load styles on every page of your site. This is fine if you’re a few lines of code. But once you start cracking 100 lines or so, it might be worth moving to Tablepress’s built-in CSS feature.

Anatomy of a TablePress Table

To correctly apply CSS to TablePress, you’ll need at least a basic understanding of the various elements and class names you can target. And there are a bunch of ’em (which makes adding styles super easy!).

Here’s the html structure of a 3×3 TablePress table.

<table class="tablepress tablepress-id-1 custom-classnames">
<thead>
<tr class="row-1 odd">
	<th class="column-1"></th>
	<th class="column-2"></th>
	<th class="column-3"></th>
</tr>
</thead>
<tbody class="row-hover">
<tr class="row-2 even">
	<td class="column-1"></td>
	<td class="column-2"></td>
	<td class="column-3"></td>
</tr>
<tr class="row-3 odd">
	<td class="column-1"></td>
	<td class="column-2"></td>
	<td class="column-3"></td>
</tr>
</tbody>
</table>

Wrapper Classes

The <table> element has several classes attached.

  • Tablepress – applied to all tables
  • tablepress-id-xxx – Specific to ID of your table
  • Custom classes – Any class names you add while creating the table.

Column & Row Classes

Tablepress adds a numbered class to each row and column, so that you can style each individually. There is also an even/odd class for alternate rows.

  • Rows: row-1, row-2, row-3
  • Columns: column-1, column-2, column-3
  • Even/Odd (rows only): odd, even

Whole-table styles

Here are some common tweaks you can use to style the entire table, not just individual rows or columns.

Change the typography

You might want to set a different default font-size for your tables, and possibly switch to a font that is easily legible at small sizes.

Heading 1Heading 2Heading 3Heading 4
ZombiesBlue99Breakfast
WerewolvesPink98Lunch
VampiresGreen97Dinner
Hangry WifeRed96Dessert

The CSS

.tablepress.your-class { font-size: 13px; font-family: Arial, sans-serif; }
Code language: CSS (css)

Center the table on a page/post

If your content area is wider than the table data, you may want to center the entire table rather than leave it left-aligned (by default).

It’s easy to do. If you’re in the old WYSIWYG editor, you can just click on ‘text’ view and put <center></center> tags on either side of the table HTML. But it’s just as easy to do with CSS.

Just set the left and right margin to ‘auto’ and it will automatically center itself.

.tablepress.your-class { margin-left: auto; margin-right: auto; }
Code language: CSS (css)

Center text in the table cells

Here’s how to center the text inside the cells (by default they’re left-aligned). You can see the demo in the table above.

The CSS

.tablepress.your-class th, .tablepress.your-class td { text-align: center; }
Code language: CSS (css)

Add borders to table cells

If you want a more spreadsheet like appearance, just add a solid border to all table cells. You can chose to include or exclude TH header cells as well.

By default, Tablepress uses the border-collapse property, so the borders will combine into a single border.

The CSS

.tablepress.your-class th, .tablepress.your-class td { border: 1px solid #666; } /* Tip: to match Tablepress defaults, use #ddd as border color */
Code language: CSS (css)

Styling TablePress Rows & Columns

Change the background color and text color for Tablepress header row

The biggest giveaway that a site is using Tablepress is the default table header styling. Changing the background color of the header cells to match your site branding is a great way to making your tables feel custom.

Heading 1Heading 2Heading 3Heading 4
ZombiesBlue99Breakfast
WerewolvesPink98Lunch
VampiresGreen97Dinner
Hangry WifeRed96Dessert

The CSS

table.tablepress.your-class thead th { background-color: #3a6377; /*background color */ color: white; /* Text Color */ }
Code language: CSS (css)

Style a specific column or row

I frequently use this to change typography (bold) or add a background color to a column or row.

Here’s how to target a specific column in Tablepress:

Heading 1Heading 2Heading 3Heading 4
ZombiesBlue99Breakfast
WerewolvesPink98Lunch
VampiresGreen97Dinner
Hangry WifeRed96Dessert

The CSS

table.tablepress.your-class .row-3 td { background-color: #f9bf76; /*background color */ font-weight: bold; /*bold font */ border-top: 1px solid #333; /*borders */ border-bottom: 1px solid #333; }
Code language: CSS (css)

And how to style a specific row:

Heading 1Heading 2Heading 3Heading 4
ZombiesBlue99Breakfast
WerewolvesPink98Lunch
VampiresGreen97Dinner
Hangry WifeRed96Dessert

The CSS

table.tablepress.your-class tbody .column-2 { background-color: #f9bf76; /*background color */ font-weight: bold; /*bold font */ border-left: 2px solid #333; /*borders */ border-right: 2px solid #333; }
Code language: CSS (css)

Change the default row striping

Tablepress lets gives you the option make your table striped, alternating the background color for even and odd rows. By default the colors are white and light gray, but you can easily customize them.

Heading 1Heading 2Heading 3Heading 4
ZombiesBlue99Breakfast
WerewolvesPink98Lunch
VampiresGreen97Dinner
Hangry WifeRed96Dessert

The CSS

.tablepress.yourclass .odd td { background-color: #f4f4f4; } .tablepress.your-class .even td { background-color: #c3ffe5; }
Code language: CSS (css)

Styling a single table cell

By combining TablePress’s row and column classes, you can precisely target individual cells for granular styling. You probably won’t use this much, but it’s a handy trick for highlighting outliers in a data set.

Note, the in the table html, the column class is inside the row class. The <tr> elements have the .row class, whereas the <td> and <th> elements have the .column class.

Heading 1Heading 2Heading 3Heading 4
ZombiesBlue99Breakfast
WerewolvesPink98Lunch
VampiresGreen97Dinner
Hangry WifeRed96Dessert
.tablepress.your-class .row-3 .column-3 { background-color: gold; font-weight: bold; border: 2px solid #5b5b5b; }
Code language: CSS (css)

Pro Tip: When using one-time styles that will never be reused on another post or table, you can embed them in custom HTML block inside your post, rather than adding them to your site-wide CSS file. In fact, that’s how I added all the example CSS for this post.

It’s super easy to do. Just put your CSS between html <style> </style> tags.

<style> /* Your CSS Here */ </style>
Code language: HTML, XML (xml)

36 thoughts on “Tablepress CSS Styles: Upgrade your WordPress tables”

    • Sure. I’m assuming you mean how to target a CSS rule that applies to any combined cell?

      Then you would do something like:

      .tablepress *[colspan], .tablepress *[rowspan] {
      /* Your rule here */
      }

      This uses the CSS attribute selector, so it applies to any child element of the Tablepress table which has the colspan or rowspan attribute.

      Note: it might take more specificity to override some default tablepress styles (such as background color). In that case, you could add more selectors to increase specificity. So:

      table.tablepress tbody td[colspan], table.tablepress tbody td[rowspan] { /* Your rule */ }

      for example.

      Reply
  1. Can you format the width of a table and center it on the page. for example give a width of 600px and center it on the page ?

    Reply
    • Sure! You might need to add additonal selectors like a class to override default styles, but here’s the basics:

      table {
      max-width: 600px;
      margin: 0 auto;
      }

      The auto-margin (left and right) is what centers it. You can change the first margin parameter (top and bottom) to be whatever you want for spacing above and below the table.

      Reply
  2. Great article, thanks.

    Can you use CSS in TablePress to change the color of a cell based on content? So if a cell has a value > 0, that cell is highlighted? The table rows change weekly, trying to to set a style based on row/column values.

    Reply
    • With pure CSS, no. You could use Javascript to get the value of each cell, compare it to some range you specify and then add a CSS class to the TD element based on the comparison. That might be slow on large tables. Another option might be a PHP filter to run the comparison and add the class when the table is built (modify Tablepress with a filter). If the filter / hook exists (it probably does) you could likely get a dev to code this for a reasonable price on upwork.

      The DIY option would be to add an HTML div around each number in the table. Then you could apply CSS rules to that div based on ta class, remove the padding on your table cells so the div takes up the full dimensions of the table cell. Obviously this is very tedious for a large table. A programmatic solution (like the custom PHP method) is probably best.

      If you’ do get this built and would like to share the code, I’d love to add it to the article! It’s a really useful bit of functionality that lots of people could benefit from.

      Reply
  3. Thanks Man, your videos are so in-depth, I just subscribe.

    I have a question!

    Must everything be done using CSS?
    Because am just a content writer and I may forget all these lines of code for customizing my tables.

    Reply
    • There are some table plugins that can be edited visually, such as WP Table Builder Pro

      But all you really need is a couple CSS tweaks to make Tablepress look custom. Just change the header color goes a long way. I may release some full templates for tablepress in the near future.

      Reply
  4. Great instruction. Would you be able to share any tips on tablespress/css spacing for mobile devices? My tables don’t look good on smaller devices. Thanks!

    Reply
  5. How can i set up this only to table id=18?

    .tablepress.yourclass .odd td {

    background-color: #f4f4f4;
    }

    .tablepress.your-class .even td {
    background-color: #c3ffe5;
    }

    Reply
  6. I have a Tablepress column with aircraft serial numbers in a nn-nnnnn format (example: 44-83525) that is presented as a hyperlink phone number in the table. Is there code I can add to prevent these numbers as being interpreted as phone numbers?

    Reply
  7. Regards Matthew.
    Truly awesome and helpful video, but still I have issues with a media query.
    When I insert the codes, it removes the columns even on my desktop not just on mobile.
    Can you give me some advice to overcome this issue?

    Thanks in advance

    Reply
    • You just have to make sure your media query is formatted properly and the code you want to run on mobile-only is inside the media query. If you’re targeting small screens with your rule, make sure to use max-width (not min-width). So @media screen and (max-width: 600px){*/your rules here */}

      Reply
  8. I am using tablepress for a 7×10 table and meanwhile it looks ok on pc and tablet, in mobile it doesn’t shrink. I tried using the TablePress Responsive extension but no luck. I would like my table to shrink on mobile instead of scrolling, is there any way to do this with TablePress?

    Reply
    • Sure, but you can only shrink it so much. The easiest methods are to reduce padding in the cells and drop the font size. You’d use a media query to do this.
      If that’s still not enough, you can hide less-important columns like this (use inside a media query):
      .tablepress .column-3 {display: none;}

      Reply
  9. Hello, how to set the width of the one column with sorting option.

    .tablepress-id-3 .column-2 {
    width: 100px;
    }

    This works only with disable sorting.

    Thank for all your tutorial!

    Reply
    • I don’t have any issues using CSS with/without the datatables library active. Try using max-width or min-width instead of a fixed width. You can also add more specificity to the rule or add !important to make it override a conflicting rule.

      Reply
  10. my table unable to center, css:

    .tablepress {
    margin-left: auto;
    margin-right: auto;
    }

    how to centered all table in post page

    Reply
    • I’d have to take a look at your site to know for sure. But if your table width is less than the container around it, margin-left: auto; and margin-right: auto; should center it. I’ve tested it on my own site and it’s working. If you’re using the datatables JavaScript module, that may change things. You might need to center the wrapper div instead of the table itself, or else make the wrapper full-width.

      Reply

Leave a Comment