Search code examples
csscss-tables

Styling Tables - How to use column groups to modify TH tag located in that column

I am new to modifying column groups in tables and trying to learn how label the css to make the TH in the featured column group a specific background color, as well as the TD's inside that column group. My only problem is, I don't know how to setup the CSS to reflect ONLY those sections.

I have made an example table located at: http://jsbin.com/ocezon/1/edit

If I didn't phrase this correctly, please let me know and I will try to explain further. I have labeled the TH and the TD's I'd like to be able to modify using the #table-5 #featured attribute assigned by column group.

I've tried code like #table-5 #featured TH { background: #000; } but that didn't work.

EDIT: I found out that this probably isn't possible (and after trying numerous methods, I can't make it work either)...so I decided to give the answer to One Trick Pony for suggesting a method that does work; however, I slightly modified this method to make it easy to modify in the future: http://jsbin.com/icasom/1/edit

Solution

  • Without using colgroups, you can style the 3rd child of each row:

    #table-5 th:nth-child(3){ 
  background: blue;
}

#table-5 tr td:nth-child(3){
  background: #C0000E;
}

    http://jsbin.com/ocezon/3

    I modified this to make it easier to work with multiple tables and make modifying in the future easier: http://jsbin.com/icasom/1/edit