How to assign class to Columns ...

Question

I have like 100 rows, but I dont want to assign the class abc1,abc2,abc3,abc4 individually...

Is is possible to automatically assign the class to TD depending upont the column no i.e Column1 -- abc1 Column2 -- abc2 ..etc

<Table>
 <tr class="odd">
   <td class="abc1"> ...</td>
   <td class="abc2"> ...</td>
   <td class="abc3"> ...</td>
   <td class="abc4"> ...</td>
 </tr>

<tr class="even">
   <td class="abc1"> ...</td>
   <td class="abc2"> ...</td>
   <td class="abc3"> ...</td>
   <td class="abc4"> ...</td>
 </tr>

<tr class="odd">
   <td class="abc1"> ...</td>
   <td class="abc2"> ...</td>
   <td class="abc3"> ...</td>
   <td class="abc4"> ...</td>
 </tr>

</table>

Any help is appreciated.

Hmm... Thanks for all the answers Guys.. Looks like there is no way to do it through CSS. Yes, I just added it to the server html.. but I was just looking if I can avoid that.

I dont want to do it with javascript.. Thanks for answers againg Guys!!!!!!!!

Appreciate your help.

Thanks, Ben

Answer 1

Not if you want a cross-browser solution, but if support for Internet Explorer is not a problem then you can use the :nth-child rule. See here and here. You could also do it with a JavaScript library such as jQuery.

Answer 2

You could do this with Javascript or a framework like jQuery but, having gone down that road myself, I wouldn't. The reason is speed: I was doing odd-even row styling iwth jQuery and it was taking anywhere from 100-500ms to load the page (between that and a couple of other things). That is (imho) unacceptably long for something that can be done on the server.

If you're prepared to live with that, then go with that. CSS has an :nth-child(n) selector but that isn't supported in IE6. Personally I would generate the classes as part of the HTML on the serverside.

With jQuery you could do this:

<script type="text/javascript">
$(function() {
  $("table tbody tr :first-child").addClass("abc1");
  $("table tbody tr :nth-child(2)").addClass("abc2");
  // etc
});
</script>

The advantage of jQuery is that it uses CSS2.1 and some CSS3 and custom selectors but it doesn't care about what the browser supports as it supports what the browser doesn't.

Answer 3

There is the col and colgroup xhtml tags.
Learn about them.

Also, there is:

#your-table tr td:first-child     //will target first td
#your-table tr td:first-child+td //will target the all the second td
#your-table tr td:first-child+td+td //will target the all the thired td

you get the drift

Answer 4

Yes - if you are using a server side language like PHP or ASP.NET. Here is the solution in PHP, assuming precisely 100 columns:

for( $i=0; $i < 100; $i++ )
{
    echo "<td class=\"abc$i\">your content here.</td>";
}

Since PHP will parse strings and insert the literal value of PHP variables, each iteration of this loop will increment your class by the value of $i, i.e. abc0, abc1, abc2 etc.

This will accomplish what you want. However, I realize I have no idea what you are building, but I question the design decision which requires 100 columns, each of which must be styled differently. I would be interested to see your final implementation.

KN

Answer 5

Columns are actually supported in HTML and CSS using the <colgroup> and <col> tags: see http://htmldog.com/guides/htmladvanced/tables/
Add this at the begining of your table:

<table>
  <colgroup>
    <col class="class1" />
    <col class="class2" />
    <col class="class3" />
    <col class="class4" />
  </colgroup>
  ...
</table>