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>
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>
- CSS should still work if the table has the right class. but an example of the HTML with table would be useful. – Paulie_D Commented May 14, 2014 at 11:07
- 1 With jQuery you can add a class to the child inside myTable like so: $('#myTable').find('table').addClass('zebraStyle'); – Mivaweb Commented May 14, 2014 at 11:07
- @VDesign I added your code in document.Ready after calling handsontable library and copied zebraStyle into the <style></style> after h2. But it's not working. Am i missing something? – t1w Commented May 14, 2014 at 12:18
- 1 Do you have the following in your css .zebraStyle tr:nth-child(even) {background: #CCC} .zebraStyle tr:nth-child(odd) {background: #FFF} ? – Mivaweb Commented May 14, 2014 at 12:20
- i have it like this: .zebraStyle { tr:nth-child(even) {background: #CCC} tr:nth-child(odd) {background: #FFF} } – t1w Commented May 14, 2014 at 12:22
2 Answers
Reset to default 5Html 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');
});
Zebra stripes can be added by using the following css. No need for any javascript etc. Note that this works in version 0.16.1.
.htCore > tbody > tr:nth-child(even) > td {
background-color: green;
}
.htCore > tbody > tr:nth-child(odd) > td {
background-color: red;
}
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744506564a4577738.html
评论列表（0条）