Search code examples
javascriptjquerycsshandsontablezebra-striping

How to make handsontable table zebra striped?

I'm displaying some data in table by using handsontable library. Normally i can zebra stripe an html table like this:

.zebraStyle {
 tr:nth-child(even) {background: #CCC}
 tr:nth-child(odd) {background: #FFF}
}

But with handsontable i display my table within div element. How can i do this? Below you can see my html code:

    <style type="text/css">
        body {background: white; margin: 20px;}
        h2 {margin: 20px 0;}
        .zebraStyle tr:nth-child(even) {background: #CCC}
        .zebraStyle tr:nth-child(odd) {background: #FFF}
    </style>

    <script type='text/javascript'>
        var arr= [["", "2012", "2013", "2014(YTD)"],["Ferrari", 1460089088.3900001, 1637243070.99, 283566771.55000001],["Alfa Romeo", 1199141138.1900001, 1224624821.1500001, 192307335.49000001]];
            $(document).ready( function(){
                $('#myTable').handsontable({
                    data: arr,
                    minSpareRows: 1,
                    contextMenu: true,
                    readOnly: true,
                    fixedColumnsLeft: 1
                });
                $('#myTable').find('table').addClass('zebraStyle');
            });
    </script>
</head>
<body>
    <div id="myTable" class="handsontable" style="width: 400px; margin-left:auto; margin-right:auto; background-color:silver"></div>
</body>

Solution

  • Html code

    <div id="myTable" class="handsontable"></div>

    The div element on which the table will be appended to using the handshake script

    Css

    body {background: white; margin: 20px;}
h2 {margin: 20px 0;}

.zebraStyle > tbody > tr:nth-child(2n) > td {background: #ccc;}
.zebraStyle > tbody > tr:nth-child(2n+1) > td {background: #fff;}

    The > means to take directly the element you present.

    In this case you take the tbody directly after .zebraStyle ( your table element ).

    After that take the odd tr rows.

    At last take directly all td cells and apply the background color.

    Script

    var arr= [["", "2012", "2013", "2014(YTD)"],["Ferrari", 1460089088.3900001, 1637243070.99, 283566771.55000001],["Alfa Romeo", 1199141138.1900001, 1224624821.1500001, 192307335.49000001]];

$(document).ready( function(){
    $('#myTable').handsontable({
        data: arr,
        minSpareRows: 1,
        contextMenu: true,
        readOnly: true,
        fixedColumnsLeft: 1
    });
    $('#myTable').find('table').addClass('zebraStyle');
});