Welcome to WebmasterWorld Guest from 3.93.74.227

Forum Moderators: not2easy

Message Too Old, No Replies

dynamic color change of table cells

css implement gradient in cells

     
6:27 pm on Apr 17, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 2, 2006
posts:2241
votes: 8


I hope I titled this right.

I thought it would be cool if I can set the background color of table cells by setting the base color for i.e. first cell in a row, and then setting to lighten each next by 20%, by using the nth child formula.

For example, for the 1st cell I set the color to #000 (black), so the 2nd cell is 80% of black, 3rd 60% of black, and so on.

Would this be possible?

Thank you
7:13 pm on Apr 17, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts:2740
votes: 839


You can try using the :nth-child() pseudo class.

tr:nth-class(1){background:#000;}
tr:nth-class(2){background:#333;}
tr:nth-class(3){background:#AAA;}
tr:nth-class(4){background:#CCC;}
tr:nth-class(5){background:#FFF;}
10:28 pm on Apr 17, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15937
votes: 889


Just make sure you're not creating accessibility problems. If the cells contain images, thatís one thing, but if itís text, what happens to its readability?

Also, make sure the table remains a perfect grid--no colspan or rowspan variations--or disaster will ensue. (That is: the world as we know it will not end. But it will look frightful.)
1:50 am on Apr 18, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 2, 2006
posts:2241
votes: 8


Thanks for both replies.
1st, I know that, I wanted to set the starting color and let each next be reduced/increased by same percentage in correlation to the previous one. To automate it.
2nd, as I already experimented by setting gradual cell backgrounds manually by using nth child, I run into that readability issue.
2:04 am on Apr 18, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts:2740
votes: 839


To automate it you will need to use JS.
2:38 am on Apr 18, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15937
votes: 889


But then your scriptless visitors won't see what you want them to see. It doesn't have to be client-side dynamic, though, does it? You could do the same thing in php-or-equivalent ... and then, if you ever do need to mess with colspan or rowspan, you can code it to make the appropriate adjustments: this is the 2nd cell in its row, but I need it to be colored like a 3rd cell because of stuff that happened earlier in the table.

:: detour to check something ::

Nope, I don't think you could get (calc) in CSS alone to work. Aside from the +-*/ limitation, I don't think colors can even take calculated values.

In any language--even javascript--it would be easy. For each nth child, it's something^n--or Math.pow(blahblah), I have to look it up every time--multiplied by your starting value. And then round off to integers to make the CSS happy.

Just how flexible does it need to be? Do you envision lots of tables, with varying numbers of columns? Would you then want the percentage to be determined by the total number of columns, so that the 5th column in a 10-column table or the 3rd column in a 6-column table or the 20th column in a 40-column table (ouch) would all come out at 50%, and the intervening columns are appropriately scaled?

Or would you want each cell to be a percentage of the preceding cell--no matter how many or how few there are--so you never reach zero?

Hm. This seems like a fun little programming exercise.
3:03 am on Apr 18, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts:2740
votes: 839


But then your scriptless visitors won't see what you want them to see.

They also wont see any ads!.... (I make money from ads)

Yes this would be very easy with JS. You can always play with opacity which is denominated as a ratio.

That being said, the roll of a table is the display text. But what is being described begins to border on a heat map, and the use of table may not be the best suited for this. I use SVG for this type thing. You can present it in a tabbed format the heat map shown (showing colors and text values) and then the raw data on another tab in table form.
11:19 am on Apr 22, 2018 (gmt 0)

Preferred Member

Top Contributors Of The Month

joined:Mar 25, 2018
posts:500
votes: 101


there is a "calc" keyword in CSS3, which allows to "calculate" values, but I don't know how it works.
5:59 pm on Apr 22, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15937
votes: 889


See earlier post. I looked it up; there are at least two impediments to using (calc).
4:23 am on Apr 23, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:12913
votes: 893


But then your scriptless visitors won't see what you want them to see
Not enough to worry about IMO.

My NoScript alert is only called once or twice every several months out of hundreds of thousands of page loads, and most of those load JS on the next page load so they're just using a browser extension they can turn off to continue.
7:00 pm on Apr 23, 2018 (gmt 0)

Preferred Member

Top Contributors Of The Month

joined:Mar 25, 2018
posts:500
votes: 101


At worse, you can create a background gradient at the table level.
8:32 pm on Apr 23, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15937
votes: 889


My NoScript alert is only called once or twice every several months out of hundreds of thousands of page loads
Astounding. I see people getting the noscript version of piwik almost every day--and I think it is safe to say that my site is orders of magnitude smaller than any of yours.
9:58 pm on Apr 23, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:12913
votes: 893


One of the failings of stat software no doubt.
11:45 pm on Apr 23, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15937
votes: 889


stat software
?

I'm talking about requests in access logs. I almost never go into Piwik itself (yes, I realize it's called something different now), I just track the requests for piwik.php. And then, if I have grounds for suspicion, cross-check against logs for the site itself.