За последние 24 часа нас посетили 8197 программистов и 1008 роботов. Сейчас ищут 262 программиста ...

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

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

Метки:
  1. Rocketware

    Rocketware Новичок

    С нами с:
    1 дек 2020
    Сообщения:
    31
    Симпатии:
    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 был белым?
     
  2. amberson

    amberson Новичок

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

    Rocketware Новичок

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

    amberson Новичок

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

    Rocketware Новичок

    С нами с:
    1 дек 2020
    Сообщения:
    31
    Симпатии:
    0
  6. amberson

    amberson Новичок

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

    Rocketware Новичок

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

    amberson Новичок

    С нами с:
    23 июл 2020
    Сообщения:
    46
    Симпатии:
    9
    Не совсем, можно было и без tbody и tfoot сделать, варианты есть и не один.
     
    Rocketware нравится это.