Support » Plugin: TablePress » Extra CSS Classes per row

  • Resolved Scottomalley


    I’m looking for advice on extending Tablepress to allow Extra CSS on a per row basis. similar to how it is done on the table level at present.

    Do you know of any plugins that would allow this, or could you point me at what files I would need to edit and extend to let this happen?

    I would use the current row css selectors, but I won’t be the one using this install and the person using it is not a programmer, I’m hoping to add a dropdown of the css classes I’ve added and just let the user select the correct one.

    Cheers for the help


Viewing 1 replies (of 1 total)
  • Plugin Author TobiasBg


    Hi Scott,

    thanks for your question.

    I see what you are trying to do, but at this time, I’d like to discourage you from doing this.
    Adding such function to TablePress would require changes in almost all parts of the plugin, including table loading, user interface, saving and rendering. This will be a real mess, as not all these places offer plugin filter hooks or actions at this time that could be used. You would therefore have to modify plugin files directly, which is bad, as you would have to re-apply those changes after every update.

    Instead, I’d like to suggest a similar method/workaround. It’s kind of hacky, but it should work even for inexperienced users.
    There’s a TablePress Extension that can highlight rows based on its content that you can download from

    The basic concept is explained in this thread:

    In your case, let’s say you have the CSS classes “one”, “two”, and “three” that you want the user to attach to a row.
    Then, you would add a new first column to the table where the user would enter the CSS class that he wants to apply (this is basically the replacement of the dropdown that you mention).
    To hide this column from the site visitors, you can add this “Custom CSS”:

    .tablepress-id-123 .column-1 {
      display: none;

    Then, change the Shortcode of the table to

    [table id=123 row_highlight="one||two||three" /]

    to tell the Row Highlighting Extension what to look for.
    This will then add (slightly adjusted) CSS classes to the rows, that you can style via “Custom CSS”:

    .tablepress-id-123 .row-highlight-one td {
      background-color: #ff0000 !important;
    .tablepress-id-123 .row-highlight-two td {
      background-color: #00ff00 !important;
    .tablepress-id-123 .row-highlight-three td {
      background-color: #0000ff !important;


Viewing 1 replies (of 1 total)
  • The topic ‘Extra CSS Classes per row’ is closed to new replies.