Title: Highlight Rows using Table Manipulation Last modified: August 30, 2016 --- # Highlight Rows using Table Manipulation * Resolved [orbitrod](https://wordpress.org/support/users/orbitrod/) * (@orbitrod) * [10 years, 6 months ago](https://wordpress.org/support/topic/highlight-rows-using-table-manipulation/) * We are trying to duplicate the table styling on this page with TablePress [http://www.enochsystems.com/intl/products/rack-industrial-computers/souris-b461/](http://www.enochsystems.com/intl/products/rack-industrial-computers/souris-b461/) * This is what we have been able to do so far [http://www.enochsystems.com/intl/products/lcd-board-dev-kits/vuekit-6x-series/#tab-3318bf148ff9411ded2](http://www.enochsystems.com/intl/products/lcd-board-dev-kits/vuekit-6x-series/#tab-3318bf148ff9411ded2) * We are having trouble highlighting the “Specification Titles”, ie: PROCESSOR & CHIPSET, MEMORY, STANDARD / INTEGRATED DEVICES, etc. * We researched this issue and found that we could highlight it using custom CSS found on this page. [https://tablepress.org/faq/highlight-cells-or-content/](https://tablepress.org/faq/highlight-cells-or-content/) * But this only works if we know the row and column numbers. Which we don’t always know. * We tried the HTML element method, but we are not achieving the desired results. * I was wondering if there was anything else we can do to achieve the table styling found in the first link above. * PS: The table shortcode we are using is [table id=1 first_column_th=true /] * [https://wordpress.org/plugins/tablepress/](https://wordpress.org/plugins/tablepress/) Viewing 7 replies - 1 through 7 (of 7 total) * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [10 years, 6 months ago](https://wordpress.org/support/topic/highlight-rows-using-table-manipulation/#post-6672434) * Hi, * thanks for your question, and sorry for the trouble. * The `` 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 ``). * If you don’t want to use the manual row/column number approach, you could take a look at the approach from [https://wordpress.org/support/topic/highlight-a-row-based-on-value?replies=16](https://wordpress.org/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 * Thread Starter [orbitrod](https://wordpress.org/support/users/orbitrod/) * (@orbitrod) * [10 years, 6 months ago](https://wordpress.org/support/topic/highlight-rows-using-table-manipulation/#post-6672568) * 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. [http://www.enochsystems.com/intl/nitrogen6x-specifications/](http://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? * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [10 years, 6 months ago](https://wordpress.org/support/topic/highlight-rows-using-table-manipulation/#post-6672581) * 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 * Thread Starter [orbitrod](https://wordpress.org/support/users/orbitrod/) * (@orbitrod) * [10 years, 6 months ago](https://wordpress.org/support/topic/highlight-rows-using-table-manipulation/#post-6672599) * 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. [http://www.enochsystems.com/intl/products/lcd-board-dev-kits/vuekit-93-series/#tab-187a1dbe61d6ae64918](http://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. [http://www.enochsystems.com/intl/nitrogen6x-specifications/](http://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;} ``` * Thread Starter [orbitrod](https://wordpress.org/support/users/orbitrod/) * (@orbitrod) * [10 years, 6 months ago](https://wordpress.org/support/topic/highlight-rows-using-table-manipulation/#post-6672600) * 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. * Thread Starter [orbitrod](https://wordpress.org/support/users/orbitrod/) * (@orbitrod) * [10 years, 6 months ago](https://wordpress.org/support/topic/highlight-rows-using-table-manipulation/#post-6672610) * 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. [http://www.enochsystems.com/intl/products/lcd-board-dev-kits/vuekit-6x-series/#tab-3318bf148ff9411ded2](http://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! * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [10 years, 6 months ago](https://wordpress.org/support/topic/highlight-rows-using-table-manipulation/#post-6672629) * 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](https://wordpress.org/support/view/plugin-reviews/tablepress) here in the plugin directory. Thanks! Viewing 7 replies - 1 through 7 (of 7 total) The topic ‘Highlight Rows using Table Manipulation’ is closed to new replies. * ![](https://ps.w.org/tablepress/assets/icon.svg?rev=3192944) * [TablePress - Tables in WordPress made easy](https://wordpress.org/plugins/tablepress/) * [Frequently Asked Questions](https://wordpress.org/plugins/tablepress/#faq) * [Support Threads](https://wordpress.org/support/plugin/tablepress/) * [Active Topics](https://wordpress.org/support/plugin/tablepress/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/tablepress/unresolved/) * [Reviews](https://wordpress.org/support/plugin/tablepress/reviews/) ## Tags * [row](https://wordpress.org/support/topic-tag/row/) * 7 replies * 2 participants * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * Last activity: [10 years, 6 months ago](https://wordpress.org/support/topic/highlight-rows-using-table-manipulation/#post-6672629) * Status: resolved