Zebra Background Colors
Permalink Browser Info Environment
I would like to add styling to support a zebra like background, though not every other row. Basically something like this:http://tlcrehab.org/index.php/facilities/tlc-galveston/about-the-st... - So I can color code based off sections. Would be great if there was a way under options to specify alternating colors/rows and then in rows to pick an alternating color to over-ride the typical zebra style I suspect most would like.
Anyhow - suggestions on how to accomplish this as is, or an improvement to the plugin?
Anyhow - suggestions on how to accomplish this as is, or an improvement to the plugin?
| Type: | Ticket |
|---|---|
| Status: | Archived |
Hi,
Thanks this helps, but for this table I don't want a traditional Zebra of every other row. I need to make - say 2 consecutive rows white, then 3 consecutive rows, the darker color, then say 1 row the white, then 4 consecutive rows the dark color.
Is there a way to override the background color (if normal) for specific rows - as my needs don't follow the every other pattern.
Thanks this helps, but for this table I don't want a traditional Zebra of every other row. I need to make - say 2 consecutive rows white, then 3 consecutive rows, the darker color, then say 1 row the white, then 4 consecutive rows the dark color.
Is there a way to override the background color (if normal) for specific rows - as my needs don't follow the every other pattern.
Hi,
You can insert any css rules into:
Design > Table Styles, Header Cell Styles, Body Cell Styles,...
You can insert any css rules into:
Design > Table Styles, Header Cell Styles, Body Cell Styles,...
Thanks, yes I see that and perhaps I'm just need to upskill my CSS skills, but is there a way to specify which rows get which colors via the CSS sheet for that table? Based on your answer I am suspecting there is a way to program that. (When I built the table previously I just specified the style (a or b) at the individual row level so I had the control I speak of....
Sure you can, you can copy the provided code for striped or hover effect at the end of responsible-table.css file and replace 'odd' with a number:
.table-striped > tbody > tr:nth-of-type(3) { background-color: red!important; } .table-striped>tbody>tr:nth-child(3)>td, .table-striped>tbody>tr:nth-child(3)>th { background-color: red!important; }
Thanks - sorry for the delay in getting back - I've been traveling - I can see how this works for a pattern, but my table data doesn't follow a set pattern.
I've got one row - needs to be white
2nd and 3rd row - colored
4th, 5th,6th row white
7th row colored
etc. There is no set pattern for the groupings of items - Really need to be able to set the zebra on or off at each individual row (or color for each row) - ideas?
I've got one row - needs to be white
2nd and 3rd row - colored
4th, 5th,6th row white
7th row colored
etc. There is no set pattern for the groupings of items - Really need to be able to set the zebra on or off at each individual row (or color for each row) - ideas?
Okay I tried one other idea... in the areas where there are rows "grouped" together I just put a BR tag after each line. So they actually remain part of the same row. Kind of messy, but seems to work - though the row widths in editing make it a bit of a pain (could be wider). Would this seem to be the best solution for the problem - or other ideas?
Attention: Since there has been no activity on this issue for two weeks, this issue has been automatically archived.
To re-open this issue, reply to this message.
To re-open this issue, reply to this message.
Attention: Since there has been no activity on this issue for two weeks, this issue has been automatically archived.
To re-open this issue, reply to this message.
To re-open this issue, reply to this message.
Please upgrade to latest version (1.1.0) which has striped table feature built-in.
Options > Design > Table Class > striped
Also you can copy the responsible style for stripe or hover effect from
\packages\whale_responsive_tables\css\themes\default\responsive-tables.css
to
Options > Design > Styles
and change the color.