<table> column and row style....

Question

I've a <table> which has 10 column and 10 row i want to give different background to 1st and and 3rd column and another different background color to 8th row . is it possible without css class/id

Answer 1

By using JQuery JavaScript framework it might be easier in your case.

Answer 2

If you are targeting A-Grade browsers with any sort of historical nature to them (IE 6, etc) you cannot do it without using a class/ID to select them. If the browser you are targeting supports :nth child selectors in CSS, you could write a rule to select them, but know that it won't be supported by all (probably) of your visitor's browsers.

Here is a reference to Sitepoint's nth child article

Answer 3

This is incredibly hacky. Doesn't work at all in IE6 (due to using the '+' adjacent-child selector). Mostly works in FF 3.6, but should give you an idea of how ugly this gets without using classes, IDs or :nth-child selectors.

<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>

As this stands, the red/green columns get terminated by the yellow row. But some MORE of this ugly stuff could resume them on rows 9 and 10.