Topic
2 replies Latest Post - ‏2013-06-18T15:41:24Z by smithkenny
markboyd
markboyd
7 Posts
ACCEPTED ANSWER

Pinned topic "Greenbar" style for tables

‏2013-06-11T01:31:12Z |

Anyone know how to have tabular data (tables) displayed with a "green bar" type effect, where the rows of data have alternating background colors? 

Is there some way to simply alter the CSS to get this effect?

Thanks.

  • tmparker
    tmparker
    516 Posts
    ACCEPTED ANSWER

    Re: "Greenbar" style for tables

    ‏2013-06-11T06:36:25Z  in response to markboyd

    Hi Mark,

    The answer to this question depends on a couple of factors. First, is this a HATS generated table or some custom table you coded? If it's a HATS table, which template are you using? If you look at the source for a table we generate, such as the field table or visual table, you should see a class assigned to each row such as:

    <tr class="HATSTABLEODDROW">

    or

    <tr class="HATSTABLEEVENROW">

    If you look at the stylesheet for that template you will find the background color defined for that class type. I think in most of our stylesheets they are grouped together and use the same color. To change this simply modify the values to separate them and assign different color values.

    If you are not using a HATS table and this is a custom table you created then you can look into using something like the :nth-child() psuedo class, but be aware that not all browser versions support this.

    Thanks

    Tim

  • smithkenny
    smithkenny
    23 Posts
    ACCEPTED ANSWER

    Re: "Greenbar" style for tables

    ‏2013-06-18T15:41:24Z  in response to markboyd

    Mark, I've successfully used the :nth-child rules as Tim described. You can can use these with HATS tables as well (subfiles, and visual tables).

     

    
    
    tr 
    { 
       
    color
    : 
    blue
    ;
    }
    tr
    :
    nth-child
    (
    odd
    ) 
    { 
       
    background-
    color
    : 
    green
    ;
    
    }
    
    tr
    :
    nth-child
    (
    even
    ) 
    { 
       background-
    color
    : 
    white
    ;
    }