Menu
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>
977
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');
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
