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


Tags: css,table

Problem :

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


    CSS Howto..

    Using CSS to create custom borders with just the corners showing

    How to remove all css classes of all items of a
    with jQuery?

    How do you switch the cursor to a pointer cursor when hovering over the bars in a Kendo UI bar chart

    How can I embed a smartphone simulator in html5? [closed]

    Wordpress: How to add a caption right-aligned to the edge of the image

    How to make div covers divs on hover?

    How to add a css on a div by finding a children class on its sibling div by jquery

    Show background image if container content is small (responsive)

    How to make 3-Column layout with fluid center (fully utilize space), and variable-length on sidebars

    How to animate CSS Translate

    How to get a css animation to transition quicker in keyframes

    unexpected script/css conflict, how to resolve?

    How to highlight the parent item in active state without the children being affected in wordpress navigation?

    How to get sourcemaps working for React Css Modules?

    How to get the “declared” CSS value, not the computed CSS value

    CSS: How to make a block to cover all width of parent block

    How can I use javascript or jQuery to make this table fill available width and height?

    How to make a split screen video with full height?

    How to make all select elements 15px wider?

    HTML/CSS: How to resize checkboxes (without overlapping)

    How to show only a portion of an image just by using the img tag?

    How to add css style in php email?

    How to blink a text on button in IE ,chrome etc using JQuery or CSS

    How can I create a status bar with bootstrap?

    Show bigger image on thumbnail's hover

    How to insert a line break before an element using CSS

    how to deal with repeated letters in a javascript hangman game

    How to get the Tololtip Tail for Menu

    How to add CSS to ASP.NET site with WebOptimization and Bundling

    AngularJS ng-show animation cross-fade inside ng-repeat