i’m currently trying to display a course schedule using Xibo. The filtering of the imported CSV using SQL Methods works as expected, but i’m having trouble styling the table-rows differently (zebra-rows) using the “nth-child” selector in the custom CSS.
I’ve had success using “div.item”, which is the div class that is set for each repeated table row (took that from the layout preview) - but for some reason, it doesn’t work in my other layout.
Is there any “best practice” for achieving this result?
So nth-child by itself won’t work (well it will but not correctly) so for example nth-child(odd) will change colour of every row because when we animate each <p> becomes <div class="item"><p></div>
meaning they are ALL item 1 of their parent, but if you would use something like:
So that would be the correct way to do this.
nth-child is supported in IE since IE8 so it might be required to update IE and emulated browser registry setting.
Thanks Peter, it works now, i had some problems in the additional style sheet that was also causing more problems.
The problem is, that the size of the div exceeds the size of the table slightly, so the background coloring also “bleeds” outside the table… Is there a way to get around that problem as well?
i found a solution for the problem mentioned in my previous reply:
if you select the table row within the div.item class, the “bleeding” stops and the background color is limited to the table:
div.item tr:nth-child(odd) … etc
Just in case anyone is wondering how this can be achieved!
Unfortunately, i’m now facing another (probably css-related) problem:
The duplicated table rows are not aligned correctly among eachother (the borders are not lining up, even though i set “table-layout: fixed”…
Is there a way to find out how Xibo renders these html objects in the final wrapper? I’d like to create a “once and for all” table setup that will work as it would in “manually” created html…
