Thread Starter
vgray
(@vgray)
UPDATE
I managed to figure out the issue, now I am looking at targeting decimals and percentages as my highlighted cells.
I find it safe to assume that
.tablepress.IND-Performance .highlight-0.0
and
.tablepress.IND-Performance .highlight-100%
both don’t work in the CSS code and [highlight=”0.0″] and [highlight=100%] doesn’t work, so how would I go about highlighting these kinds of values?
Thanks again!
Hi,
thanks for your post, and sorry for the trouble.
To have multiple columns in the highlight_columns parameter, just write them as a comma-separated list (which you probably already found out), like
highlight_column=2,4,7
As for the other values: That will actually work, but the resulting CSS classes will likely not contain the special characters (as . and % are not valid in CSS classes). It will be something like
highlight-0-0 or highlight-100-, in your examples. To check this, you can use the “View source” feature of the browser when viewing the page with the table, and the find an example cell and look for the CSS classes that it has.
Regards,
Tobias
Regards,
Tobias
Thread Starter
vgray
(@vgray)
In the highlight_columns= tag, I had to do highlight_columns="2"||"4"||"8" in order to make it work actually.
Just to confirm, I should try one of the two lines;
.highlight-0-0
.highlight-100-
And continue to use [highlight=”0.0||100%”] in the shortcode?
Hi,
highlight_columns="2"||"4"||"8"
will definitely not work. The correct syntax is
highlight_columns="2,4,8"
Yes, try those two lines as the CSS selectors, but to double check use “View source” on the page with the table and check what the CSS classes are for those cells in the HTML code of the page.
Regards,
Tobias
Thread Starter
vgray
(@vgray)
Tobias,
Am I able to specify which column has which highlights in the css code using .column-# ?
For example:
.tablepress.IND-Performance .column-6 .highlight-1 {
background-color: red
}
or
.tablepress.IND-Performance .highlight-1 .column-6 {
background-color: red
}
Thanks,
Vince
-
This reply was modified 3 years, 7 months ago by
vgray.
Thread Starter
vgray
(@vgray)
Is there a way I could use <span> elements for this?
Thread Starter
vgray
(@vgray)
One more thing, is there a way to do a less than statement for the .highlight function?
Hi,
to restrict the highlighting to a column, you would need to combine the CSS classes without a space between them, like
.tablepress.IND-Performance .column-6.highlight-1 {
background-color: red;
}
Using <span>s is possible, in the sense that you can of course have them in the table cells and also use them for styling. The Extension can however not add them.
Using “less than” or “bigger than” statements is not possible. The Extension can only search for equality. For integers it therefore often works to use || operator and specify all valid integers. For floats, this will however not help, sorry.
Regards,
Tobias
Thread Starter
vgray
(@vgray)
I’m fine with using the || connector in the shortcode, I am simply looking for a way to not have to write
.tablepress .highlight-0-0
.tablepress .highlight-0-1
.....
All the way to
.tablepress .highlight-100-0
Hi,
I understand, but unfortunately, I’m not aware of a solution for that, currently 🙁 Sorry.
Regards,
Tobias
