За последние 24 часа нас посетили 22148 программистов и 1145 роботов. Сейчас ищут 875 программистов ...

Четные и нечетные строки в таблице

Тема в разделе "HTML и CSS", создана пользователем Rocketware, 7 дек 2020.

Метки:
  1. Rocketware

    Rocketware Активный пользователь

    С нами с:
    1 дек 2020
    Сообщения:
    33
    Симпатии:
    0
    Всем привет!
    Мне подсказали, что можно раскрасить четные и нечетные строки в таблице средствами CSS.
    Я сделал так:
    Код (CSS):
    1. .main_table tr:nth-child(even) {
    2.     background: white;
    3. }
    4. .main_table tr:nth-child(odd) {
    5.     background: lightblue;
    6. }
    Все работает, но только футер тоже голубой стал, я уже и пробовал:
    Код (CSS):
    1. .main_table tr:last-child() {
    2.     background: white;
    3. }
    4.  
    5. .main_table tfoot {
    6.     background: white;
    7. }
    Объясните плиз новичку, что я делаю не так, и как правильно сделать чтобы футер таблицы tfoot был белым?
     
    #1 Rocketware, 7 дек 2020
  2. amberson

    amberson Активный пользователь

    С нами с:
    23 июл 2020
    Сообщения:
    62
    Симпатии:
    14
    А так?
    Код (CSS):
    1. .main_table tfoot tr {
    2.     background: white;
    3. }
     
    #2 amberson, 7 дек 2020
  3. Rocketware

    Rocketware Активный пользователь

    С нами с:
    1 дек 2020
    Сообщения:
    33
    Симпатии:
    0
    К сожалению, цвет все равно голубой, а не белый((
     
    #3 Rocketware, 8 дек 2020
  4. amberson

    amberson Активный пользователь

    С нами с:
    23 июл 2020
    Сообщения:
    62
    Симпатии:
    14
    Дайте ссылку если есть в онлайне, если нету то тогда код верстки приведите.
     
    #4 amberson, 8 дек 2020
  5. Rocketware

    Rocketware Активный пользователь

    С нами с:
    1 дек 2020
    Сообщения:
    33
    Симпатии:
    0
    #5 Rocketware, 8 дек 2020
  6. amberson

    amberson Активный пользователь

    С нами с:
    23 июл 2020
    Сообщения:
    62
    Симпатии:
    14
    Код из первого сообщения можно весь убрать и вставить этот.
    Код (CSS):
    1. .main_table tr {
    2.     background: white;
    3. }
    4.  
    5. .main_table tbody tr:nth-child(odd) {
    6.     background: lightblue;
    7. }
    И строки не входящие в tfoot обернуть в tbody чтоб порядок был, сейчас это делает браузер неявно.
     
    #6 amberson, 8 дек 2020
    Rocketware нравится это.
  7. Rocketware

    Rocketware Активный пользователь

    С нами с:
    1 дек 2020
    Сообщения:
    33
    Симпатии:
    0
    Спасибо, все заработало! Я так понимаю, косяк было в том, что я забыл про tbody?
     
    #7 Rocketware, 8 дек 2020
  8. amberson

    amberson Активный пользователь

    С нами с:
    23 июл 2020
    Сообщения:
    62
    Симпатии:
    14
    Не совсем, можно было и без tbody и tfoot сделать, варианты есть и не один.
     
    #8 amberson, 8 дек 2020
    Rocketware нравится это.
(Вы должны войти или зарегистрироваться, чтобы разместить сообщение.)