Как сделать стол ручной работы в полоску под зебру?

Я отображаю некоторые данные в таблице с помощью библиотеки handsontable. Обычно я могу полосать зеброй html-таблицу следующим образом:

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

Но с помощью handsontable я показываю свою таблицу в элементе 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>


javascript jquery css handsontable zebra-striping
person t1w    schedule 14.05.2014    source источник
comment
CSS все равно должен работать, если таблица имеет правильный класс. но пример HTML с таблицей был бы полезен.   -  person Paulie_D    schedule 14.05.2014
comment
С помощью jQuery вы можете добавить класс к дочернему элементу внутри myTable следующим образом: $('#myTable').find('table').addClass('zebraStyle');   -  person Mivaweb    schedule 14.05.2014
comment
@VDesign Я добавил ваш код в document.Ready после вызова библиотеки handsontable и скопировал zebraStyle в ‹style›‹/style› после h2. Но это не работает. Я что-то пропустил?   -  person t1w    schedule 14.05.2014
comment
Есть ли у вас в CSS следующее: .zebraStyle tr:nth-child(even) {background: #CCC} .zebraStyle tr:nth-child(odd) {background: #FFF}?   -  person Mivaweb    schedule 14.05.2014
comment
у меня это так: .zebraStyle { tr: nth-child (четный) {фон: #CCC} tr: nth-child (нечетный) {фон: #FFF} }   -  person t1w    schedule 14.05.2014
comment
А если заменить на предложенный мной код?   -  person Mivaweb    schedule 14.05.2014
comment
@VDesign я обновил свой html. Вы можете проверить, если я что-нибудь пропустил?   -  person t1w    schedule 14.05.2014
comment
И если вы попробовали это с этим кодом CSS .zebraStyle › tbody › tr:nth-child(2n+1) › td {background: #CCC;}   -  person Mivaweb    schedule 14.05.2014
comment
Боюсь, я не знаком с использованием в css. Вы напечатали это только для демонстрации? Но я изменил код следующим образом: .zebraStyle tbody tr:nth-child(2n) {background: #CCC} .zebraStyle tbody tr:nth-child(2n+1) {background: #FFF}   -  person t1w    schedule 14.05.2014
comment
Я опубликую авсер со всем кодом и пояснениями   -  person Mivaweb    schedule 14.05.2014

Ответы (2)


arrow_upward
4
arrow_downward

HTML-код

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

Элемент 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;}

> означает брать непосредственно элемент, который вы представляете.

В этом случае вы берете tbody сразу после .zebraStyle (элемент вашей таблицы).

После этого возьмите нечетные строки 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');
});
person Mivaweb    schedule 14.05.2014

arrow_upward
4
arrow_downward

Полосы зебры можно добавить с помощью следующего 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;
}
person Jitesh Vassa    schedule 04.08.2015