Не работает css оформление таблицы

[illmano]

Всем привет. Нашел я один сервис по генерации css оформления таблицы Для просмотра ссылки Войди или Зарегистрируйся . Сгенерировал оформление, добавил в конец css файла со стилями сайта. Обернул нужную таблицу в див с классом, который сгенерировал на этом сайте. Но полностью оформление не применяется. Кто может сказать почему? Как это поправить? Пробую на тестовой странице Для просмотра ссылки Войди или Зарегистрируйся
Классом обернута инфа о товаре. (.datagrid)

 

[mdss]

из файла стилей применяется все. Что именно не так оформлено?

 

[illmano]

Должно быть чередование цветов строк.

Add. Сейчас попробую еще раз

Сейчас снова сгенерировал оформление и применил, но результат тот же.
Оформление должно быть таким

Вот код css:

.datagrid table { border-collapse: collapse; text-align: left; width: 100%; } .datagrid {font: normal 12px/150% Arial, Helvetica, sans-serif; background: #fff; overflow: hidden; }.datagrid table td, .datagrid table th { padding: 2px 10px; }.datagrid table tbody td { color: #7D7D7D; border-left: 1px solid #DBDBDB;font-size: 12px;font-weight: normal; }.datagrid table tbody .alt td { background: #EBEBEB; color: #7D7D7D; }.datagrid table tbody td:first-child { border-left: none; }.datagrid table tbody tr:last-child td { border-bottom: none; }

 

[Compressor]

Судя по css, что бы было чередование цветов, нужно назначить class="alt" каждому второму <tr>.

Или можешь добавить такую строчку в CSS:

.datagrid table tbody tr:nth-child(even) td {
    background:#EBEBEB;
    color:#7D7D7D;
}

 

[mdss]

в файле стилей замени это

.datagrid table tbody .alt td {

на это

.datagrid table tbody .alt td, .datagrid table tbody tr:nth-child(2n) td {

 

[illmano]

Судя по css, что бы было чередование цветов, нужно назначить class="alt" каждому второму <tr>.

Или можешь добавить такую строчку:

.datagrid table tbody tr:nth-child(even) td {
    background:#EBEBEB;
    color:#7D7D7D;
}

Вы оказались правы. Добавил в каждую вторую tr класс и все получилось! Спасибо!

 

[step-di]

Я для таких случаев использую jQuery, прошу его добавлять класс even в каждый нечетный тег tr для таблицы с классом, например, style1
это работает и для IE 8
так как свойство nth-child из CSS3 в старых браузерах не поддерживается

я такой критичный к старым браузерам, так как у части заказчиков на работе до сих пор стоит Win XP c IE6
и их злые админы не хотят ничего обновлять и устанавливать че то лишнее

jQuery(document).ready( function()  { jQuery(".style1 tr:even").addClass("even");  });

 

[illmano]

А подскажите, как прописать классы для td что бы указать там разную ширину. А то я просто в html коде написать <td width="150">. Думается мне если я оставлю так и мне понадобится потом изменить это значение - мне придется очень трудно и грустно (

 

[batcher]

А подскажите, как прописать классы для td что бы указать там разную ширину. А то я просто в html коде написать <td width="150">. Думается мне если я оставлю так и мне понадобится потом изменить это значение - мне придется очень трудно и грустно (

Пиши в html так, <td class="w150">
а в css файле для этого класса так:
.w150 {width:150px} и будет тебе счастье

 

[колючий]

Доброй ночи, а АЛЯ зебра не катит?

jQuery.fn.zebra = function(options){

    // настройки по умолчанию
    var options = jQuery.extend({
        bgEven: '#FFC080', // бэкграунд для четных строк
        bgOdd: '#FFDFBF', // бэкграунд для нечетных строк
        fontEven: '#AA7239', // цвет шрифта четных строк
        fontOdd: '#AA7239', // цвет шрифта нечетных строк
        bgHover: '#e51a4b', // бэкграунд при hover
        fontHover: '#fff' // цвет шрифта при hover
    },options);

    return this.each(function() {
        // четные строки
        jQuery(this).find('tr:even')
                  .css('background-color', options.bgEven)
                  .css('color', options.fontEven)
                  .hover(
                      function () {
                          jQuery(this).css('background-color', options.bgHover)
                                .css('color', options.fontHover);
                      },
                        function () {
                            jQuery(this).css('background-color', options.bgEven)
                                  .css('color', options.fontEven);
                        }
                  );
        // нечетные строки
        jQuery(this).find('tr:eek:dd')
                    .css('background-color', options.bgOdd)
                    .css('color', options.fontOdd)
                    .hover(
                        function () {
                            jQuery(this).css('background-color', options.bgHover)
                                  .css('color', options.fontHover);
                        },
                        function () {
                            jQuery(this).css('background-color', options.bgOdd)
                                  .css('color', options.fontOdd);
                        }
                    );

    });

};

НУ и собственно для таблицы <table class="adv_Table"

jQuery(document).ready(function(){
  jQuery('table.adv_Table').zebra({
        bgEven: 'whitesmoke', // бэкграунд для четных строк
        bgOdd: '#fff', // бэкграунд для нечетных строк
        fontEven: '#222', // цвет шрифта четных строк
        fontOdd: '#333', // цвет шрифта нечетных строк
        bgHover: '#02a1e3', // бэкграунд при hover
        fontHover: '#FFF' // цвет шрифта при hover
  });