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

Тема в разделе "Верстка", создана пользователем illmano, 12 ноя 2013.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. illmano

    illmano

    Регистр.:
    20 июн 2012
    Сообщения:
    170
    Симпатии:
    14
    Всем привет. Нашел я один сервис по генерации css оформления таблицы http://tablestyler.com/ . Сгенерировал оформление, добавил в конец css файла со стилями сайта. Обернул нужную таблицу в див с классом, который сгенерировал на этом сайте. Но полностью оформление не применяется. Кто может сказать почему? Как это поправить? Пробую на тестовой странице http://goo.gl/rPBwx3
    Классом обернута инфа о товаре. (.datagrid)
     
  2. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.126
    Симпатии:
    668
    из файла стилей применяется все. Что именно не так оформлено?
     
  3. illmano

    illmano

    Регистр.:
    20 июн 2012
    Сообщения:
    170
    Симпатии:
    14
    Должно быть чередование цветов строк.

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

    Сейчас снова сгенерировал оформление и применил, но результат тот же.
    Оформление должно быть таким
    [​IMG]
    Вот код 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; }
     
    Последнее редактирование модератором: 12 ноя 2013
  4. Compressor

    Compressor

    Регистр.:
    31 янв 2009
    Сообщения:
    314
    Симпатии:
    200
    Судя по css, что бы было чередование цветов, нужно назначить class="alt" каждому второму <tr>.

    Или можешь добавить такую строчку в CSS:
    HTML:
    .datagrid table tbody tr:nth-child(even) td {
        background:#EBEBEB;
        color:#7D7D7D;
    }
     
    Последнее редактирование: 12 ноя 2013
    illmano нравится это.
  5. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.126
    Симпатии:
    668
    в файле стилей замени это
    HTML:
    .datagrid table tbody .alt td {
    на это
    HTML:
    .datagrid table tbody .alt td, .datagrid table tbody tr:nth-child(2n) td {
     
    illmano нравится это.
  6. illmano

    illmano

    Регистр.:
    20 июн 2012
    Сообщения:
    170
    Симпатии:
    14
    Вы оказались правы. Добавил в каждую вторую tr класс и все получилось! Спасибо!
     
  7. step-di

    step-di Постоялец

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

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

    HTML:
    
    jQuery(document).ready( function()  { jQuery(".style1 tr:even").addClass("even");  });
    
     
    illmano нравится это.
  8. illmano

    illmano

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

    batcher Писатель

    Регистр.:
    2 июн 2013
    Сообщения:
    9
    Симпатии:
    4
    Пиши в html так, <td class="w150">
    а в css файле для этого класса так:
    .w150 {width:150px} и будет тебе счастье
     
    illmano нравится это.
  10. колючий

    колючий Писатель

    Регистр.:
    30 дек 2012
    Сообщения:
    9
    Симпатии:
    0
    Доброй ночи, а АЛЯ зебра не катит?;)

    Код:
    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
      });