如何製作人工表格斑馬條紋？

我通過使用handsontable庫在表中顯示一些數據。通常我可以像這樣斑馬條紋一個html表格：如何製作人工表格斑馬條紋？

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

但是與我的手錶我在div元素內顯示我的表。我怎樣才能做到這一點？下面你可以看到我的html代碼：

<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>

來源

2014-05-14 Timur Aykut YILDIRIM

如果表格有正確的類，CSS仍然可以工作。但是使用表格的HTML例子會很有用。 –

使用jQuery，你可以在** myTable **裏添加一個類，像這樣：$（'＃myTable'）。find（'table'）。addClass（'zebraStyle'）; – Mivaweb

@VDesign在** h2 **之後，我在調用handsontable庫並將zebraStyle複製到** **之後，在document.Ready中添加了您的代碼。但它不起作用。我錯過了什麼嗎？ –

HTML代碼

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

在其上表將被附加到使用握手腳本

的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;}

的>裝置可以直接打開存在的元素DIV元素。

在這種情況下，您可以直接在.zebraStyle（您的表格元素）之後使用tbody。

之後，採取奇tr行。

最後直接取所有td單元格並應用背景顏色。

腳本

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'); 
});

來源

2014-05-14 12:45:56 Mivaweb

非常感謝。這完美地解決了我的問題！ :) –

斑馬條紋可以通過使用以下的CSS加入。不需要任何javascript等。請注意，這在0.16.1版本中起作用。

.htCore > tbody > tr:nth-child(even) > td { 
    background-color: green; 
} 

.htCore > tbody > tr:nth-child(odd) > td { 
    background-color: red; 
}

來源

2015-08-04 16:40:30

如何製作人工表格斑馬條紋？

回答

相關問題