Сделайте чередующийся стиль строки таблицы CSS работающим в Internet Explorer

Я использую этот код CSS для отображения вывода базы данных в строках, где цвета повторяются в каждой второй строке.

tbody tr:nth-child(2n) td, tbody tr.even td {  
    background: none repeat scroll 0 0 #E5ECF9;  
}

Если я открою его в своем IE, это не сработает. Любой совет?

Я использую IE 8.


html css internet-explorer row css-tables
person daniel    schedule 20.01.2011    source источник

Ответы (3)


arrow_upward
20
arrow_downward

IE8 не поддерживает свойство :nth-child CSS. Вы можете заставить его работать в IE8 с помощью этого скрипта:

https://github.com/roylory/ie7-js

Как это использовать:

Вы можете включить его с помощью условных комментариев, например:

<!--[if lte IE 9]>
<script src="IE9.js"></script>
<![endif]-->

Скрипт загружается только в IE9 и ниже, другие браузеры его не видят.

Живая демонстрация: https://jsbin.com/koyahe/edit?html,css,output

(Эта демонстрация должна работать во всех версиях IE.)

person Šime Vidas    schedule 20.01.2011
comment
Этот проект выглядит мертвым. Есть еще свежие ссылки? - person Christopher Schultz; 22.11.2016
comment
@ChristopherSchultz Какие версии IE вам нужно поддерживать? За 5 лет многое изменилось. - person Šime Vidas; 22.11.2016
comment
MSIE 8, к сожалению. На самом деле я еще не пробовал это, но предполагаю, что MSIE 8 вообще не изменился, и что :nth-child по-прежнему не годится, поэтому я искал запасное решение. Мой продукт уже делает это вручную (используя чередующийся класс CSS для каждой строки таблицы), но я хочу удалить бесполезный мусор, и если есть полуэлегантный способ сделать это, меня это интересует. - person Christopher Schultz; 23.11.2016
comment
@ChristopherSchultz Пока вы можете найти где-нибудь библиотеку ie7-js, она по-прежнему должна работать, как рекламируется. Не знаю, где он сейчас официально расположен. - person Šime Vidas; 23.11.2016
comment
Правильно. Искал ссылку на текущее официальное местоположение. - person Christopher Schultz; 23.11.2016
comment
@ChristopherSchultz Я нашел репо, в котором размещена копия этой библиотеки, и обновил демо; похоже, работает в более старых версиях IE (я тестировал в IE11, используя режимы эмуляции). - person Šime Vidas; 24.11.2016

arrow_upward
8
arrow_downward

Мне нравится ответ выше, но альтернативные цвета строк, похоже, не работают, если документ не обновляется.

Попробуйте также jQuery:

$("tbody tr:even td").css("background-color", "lightgray");

Ссылка:
http://docs.jquery.com/Tutorials:Zebra_Striping_Made_Easy

person user12345    schedule 19.09.2012

arrow_upward
3
arrow_downward

Какую версию IE вы используете? :nth-child() CSS не будет работать в старых версиях IE.

IE6, IE7, IE8 Fail

IE9 (работает)

person scunliffe    schedule 20.01.2011
comment
есть ли способ отобразить это в IE8? - person daniel; 20.01.2011
comment
Если вы воспользуетесь предложением @Sime Vidas для IE7.js, он будет работать в IE8. - person scunliffe; 20.01.2011