Как придать различный стиль <table>столбцам и строкам?

Question

Как задать разные стили только для последней строки и 1-го и последнего столбца таблицы. это возможно без использования классов CSS?

См. Текущий пример здесь http://jsfiddle.net/jitendravyas/KxmY5/1/

и вот как я этого хочу:

Answer 1

Если вы ориентируетесь на браузеры A-Grade, имеющие какой-либо исторический характер (IE 6 и т. Д.), Вы не сможете сделать это без использования класса / ID для их выбора. Если выбранный вами браузер поддерживает :nth дочерние селекторы в CSS, вы можете написать правило для их выбора, но знать, что оно не будет поддерживаться всеми (возможно) браузерами вашего посетителя.

Вот ссылка на n-ную дочернюю статью Sitepoint

Answer 2

Это невероятно хаки. В IE6 вообще не работает (из-за использования селектора соседних дочерних элементов '+'). В основном работает в FF 3.6, но должен дать вам представление о том, насколько это ужасно, без использования классов, идентификаторов или селекторов nth-child.

<style type="text/css">

table tr + tr + tr + tr + tr + tr + tr + tr td {
        background-color: yellow; /* row 8 */
}

table tr + tr + tr + tr + tr + tr + tr + tr + tr td {
        background-color: white; /* rows 9+ */
}

table tr td {
        background-color: red; /* 1st column */
}

table tr td + td {
        background-color: white; /* reset 2nd column to white */
}

table tr td + td + td {
        background-color: green; /* 3rd column */
}

table tr td + td + td + td {
        background-color: white; /* reset cols 4-10 */
}

</style>

При этом красные / зеленые столбцы заканчиваются желтой строкой. Но некоторые БОЛЕЕ из этого уродливого материала могут возобновить их в строках 9 и 10.

Answer 3

Используя JQuery JavaScript Framework, в вашем случае это может быть проще.