TablePress

Add CSS classes to rows for highlighting based on their content!

Row Highlighting

Highlighting or, more in general, changing the styling of individual rows is possible using “Custom CSS” code. This can be tedious if the cell that is to be changed often changes. If the cells contains a suitable search term, this can be used to automatically apply the highlighting to matching rows.

By the way: The Cell Highlighting feature module allows this for individual cells!

Feature description

In the table below, the goal is to automatically change the styling (here to different background colors with bold font) of all rows that contain the country names “Australia” or “Chile” or the sports “Basketball” or “Golf”:

NameYearCountrySport
Eric1986SwedenSoccer
Julia1991GermanyBasketball
Adam2002IndonesiaGolf
Kim1986ChileBadminton
Jackson1998AustraliaBaseball
Cade1986IndiaBadminton
Keaton2003Costa RicaBasketball
Ray1999FranceGymnastics
Omar1984BrazilTennis
Maite1986NorwayWrestling
Jeremy1987United StatesFencing
Libby1989AustriaSwimming
Kermit1994UkraineVolleyball
Madison1988United StatesBoxing
Francis1993ChileVolleyball
Leigh1988AustriaRugby
Caleb1981ChinaGymnastics
Alexandra1985BelgiumWrestling
Ivana2000ItalyFencing
Craig1986BrazilAthletics
Joshua1981South AfricaGymnastics
Ryder1981BrazilSwimming
Faith1980IndonesiaBoxing
Janna1984PolandTable Tennis
Alana1986UkraineGymnastics
Wesley1981BrazilBadminton
Ina1991United StatesCycling
Amery2003ChinaSoccer
Lavinia2002FranceRowing
Maggie1981Costa RicaSkating
Walker1986MexicoBadminton
Barry1983United StatesCricket
Cheryl1982ChileHockey
Eugenia1991ItalyVolleyball
Ulla2006NetherlandsBaseball
Cynthia1999GermanySoccer
Kyle1983ItalyBoxing
Byron1984South AfricaSwimming
Matthew1994SwedenCycling
Claudia2000SpainRugby
Use this feature with a TablePress Premium plan today

To achieve this, the row highlight term was set to

Australia||Chile||Basketball||GolfCode language: plaintext (plaintext)

which contains the || logic operator to allow for searching multiple different terms

Cells that contain one of these search terms get the respective additional CSS class

row-highlight-australia
row-highlight-chile
row-highlight-basketball
row-highlight-golfCode language: plaintext (plaintext)

where the search term is appended to the string row-highlight- in lowercase, and (if used) special characters removed.

These CSS classes can be used in CSS code that is added to the “Custom CSS” text area:

.tablepress-id-123 .row-highlight-australia td {
	background-color: #c00000 !important;
	font-weight: bold;
}
.tablepress-id-123 .row-highlight-chile td {
	background-color: #00c000 !important;
	font-weight: bold;
}
.tablepress-id-123 .row-highlight-basketball td {
	background-color: #00c0c0 !important;
	font-weight: bold;
}
.tablepress-id-123 .row-highlight-golf td {
	background-color: #c0c000 !important;
	font-weight: bold;
}Code language: CSS (css)

Usage instructions

To use these features with your tables, activate the “Cell Highlighting” feature module on the “Modules” screen of TablePress Pro or TablePress Max. Then, configure the desired options in the “Highlight certain rows based on their content” section on the table’s “Edit” screen.

Screenshot of the "Row Highlighting" configuration section in the TablePress Premium versions.
The “Row Highlighting” configuration section in the TablePress Premium versions.

Alternatively, configure the desired options in the “Row Highlighting” section of the “Settings” sidebar of the table’s “TablePress table” block when editing the post or page with the table.

The available settings for the Row Highlighting module in the "Settings" sidebar of the "TablePress table" block.
The available settings for the Row Highlighting module in the “Settings” sidebar of the “TablePress table” block.

After this, add the customized CSS code for the desired highlight styling to the “Custom CSS” text area on the “Plugin Options” screen.

Configuration parameters

To configure this module’s features, you can also use these configuration parameters in the “TablePress Table” block, the Elementor widget, or in the Shortcode that you are using to embed the table:

ModuleSlugConfiguration parameterNameDescriptionTypeDefault value
Row Highlightingrow-highlightingrow_highlightRow Highlight termRows that contain this term will be highlighted. You can combine multiple highlight terms with an OR operator, e.g. term1||term2 or term1&&term2.string"" (empty string)
Row Highlightingrow-highlightingrow_highlight_case_sensitiveCase-sensitive matchingIf this is true, the case sensitivity of the highlight term has to match the content in the cell.boolean (true or false)false
Row Highlightingrow-highlightingrow_highlight_columnsHighlight columnsA comma-separated list of the columns which should be searched for the highlight terms, e.g. 1,3-5,7. By default, all columns will be searched.string"" (empty string)
Row Highlightingrow-highlightingrow_highlight_expressionRow Highlight expressionA logic expression for complex Row Highlighting.string"" (empty string)
Row Highlightingrow-highlightingrow_highlight_full_cell_matchFull cell matchingIf this is true, the full cell content has to match the highlight term.boolean (true or false)true
Row Highlightingrow-highlightingrow_highlight_rowsHighlight rowsA comma-separated list of the rows which should be searched for the highlight terms, e.g. 1,3-5,7. By default, all rows will be searched.string"" (empty string)
Row Highlightingrow-highlightingrow_highlight_url_parameterRow Highlight URL parameterThis allows providing the Row Highlight term in a URL parameter.string"" (empty string)