Highlight Rows using Table Manipulation

Hi,

thanks for your question, and sorry for the trouble.

The <span> method will not work, as that can only be used to style e.g. the text color, but not the background color of the cell (as that’s a parent element to the <span>).

If you don’t want to use the manual row/column number approach, you could take a look at the approach from https://www.ads-software.com/support/topic/highlight-a-row-based-on-value?replies=16 where you’d add a special keyword (e.g. heading or something like that) to the relevant rows and then use the highlight on that.

Regards,
Tobias

Thanks for the quick response Tobias.

I installed and activated “TablePress Extension: Row Highlighting”.

I used the following shortcode
[table id=1 first_column_th=true row_highlight=”chipset” /]

The table still looks the same and I don’t see where the CSS class, row-highlight-chipset, is being applied to the cells.
https://www.enochsystems.com/intl/nitrogen6x-specifications/

What am I missing? What I am doing wrong?

BTW I also noticed that #colspan# doesn’t work when I am using the first_column_th=true shortcode. Is that a known issue?

Hi,

I’m not sure about the #colspan# and the first_column_th. It might be possible that the browser is not interpreting that.
Why are you actually using first_column_th here?

For the highlighting: By default, this performs a full cell matching, so that you’ll have to add row_highlight_full_cell_match=false to the Shortcode as well. You can then use “Custom CSS” like

.tablepress-id-1 .row-highlight-chipset td {
	background-color: #ff0000 !important;
}

Regards,
Tobias

Thank you so much Tobias. row_highlight_full_cell_match=false solved my highlighting problem.

We need first_column_th so we can change the color and font of the column “header” cell, as well as the width. This is what our table is supposed to look like.
https://www.enochsystems.com/intl/products/lcd-board-dev-kits/vuekit-93-series/#tab-187a1dbe61d6ae64918

You will notice that under the PROCESSOR & CHIPSET “specification title” the first column cells are purple and 200px wide.

On this page, below, I have inserted a table from TablePress, twice. The first table on this page is first_column_th=true. The second table is first_column_th=false.
https://www.enochsystems.com/intl/nitrogen6x-specifications/

Here is the css that we use for the table

table.itemspec {
	width: 100%;
	margin: 0px 0 10px;
	border-collapse: collapse;
	text-align: left;
	border-bottom: 1px solid #e0dede;
	border-top: 1px solid #999;
	border-right: 1px solid #e0dede;
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.5);

}
.itemspec th, .itemspec td {padding: 5px 10px;border-top: 1px solid #e0dede;text-align: left;border-left: 1px solid #e0dede;}
.itemspec th {color: #773D97;border-right: 1px solid #e0dede;font-family: Lato, Arial, Helvetica, sans-serif;
	line-height: 1.1em;font-weight: 400;width: 25%;max-width:200px}
.itemspec td {width: 75%;}
	/*  Define the background color for all the ODD background rows  */
	.itemspec tr:nth-child(odd){
		background: #fff;
	}
	/*  Define the background color for all the EVEN background rows  */
	.itemspec tr:nth-child(even){
		background: #F7F7F9;
	}
.itemspec .spectitle {background-color: #444;color: #FFF;font: bold 15px/1.1em 'Lato', Arial, sans-serif;padding: 8px 0 5px 10px;text-transform: uppercase;border-bottom: 1px solid #e0dede;border-top: none;}
.row-highlight-spectitle td {background-color: #444;color: #FFF;font: bold 15px/1.1em 'Lato', Arial, sans-serif;padding: 8px 0 5px 10px;text-transform: uppercase;border-bottom: 1px solid #e0dede;border-top: none;}

To clarify, we only need first column th on some of the first column cells. We don’t need it on all of them.

Is there perhaps some alternative version of the Row Highlighting extension that would allow Cell highlighting? Then we could highlight a cell based on a keyword.

Hi Tobias

I was able to figure it out.

I got rid of the first_column_th shortcode entirely.

I added this css to style the first column

.itemspec .column-1 {color: #773D97;border-right: 1px solid #e0dede;font-family: Lato, Arial;line-height: 1.1em;font-weight: 400;width: 25%;max-width:200px}

I also added this style so that the column-1 css would not override row highlighting css.

.row-highlight-spectitle td {background-color: #444;color: #FFF !important;font: bold 15px/1.1em Lato, Arial !important;padding: 5px 0 5px 10px;text-transform: uppercase;border-bottom: 1px solid #e0dede;border-top: none;}

This is what is looks like now.
https://www.enochsystems.com/intl/products/lcd-board-dev-kits/vuekit-6x-series/#tab-3318bf148ff9411ded2

If you know of a better way to accomplish what I was trying to achieve, please let me know! In the meanwhile, thanks for all your help!

Hi,

yes, that’s what I would suggest here as well. You can simply use the .column-1 selector instead, which targets all cells in the first column.
Also, I’m unsure why you are using that .itemspec CSS class. That seems to be added by your theme or somehow else, so it’s not really reliable to be used in a TablePress table. I suggest to use the TablePress CSS classes instead, i.e. replace .itemspec with .tablepress or even .tablepress-id-1 to only target that table.

Best wishes,
Tobias

P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!