CODEWITHSUNDEEP
csscss-tables
kdjernigan
kdjernigan

Reputation: 397

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

Upvotes: 0

Views: 484

Answers (2)

nice ass
nice ass

Reputation: 16709

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

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 105853

your table has a strange HTML structure, colgroup and th not even wrap in a tr :

<table id="table-5">
 <colgroup> 
   <col class="row" />
  <col class="basic"/>
  <col class="premium" id="featured"/>
  <col class="enterprise"/>
</colgroup>
  <thead>
    <tr>
        <th>row</th>
        <th>basic</th>
        <th>premium (modify this TH)</th>
        <th>enterprise</th>
    </tr>
  </thead>
        <tr>
            <td>blah</td>
            <td>blah</td>
            <td>blah (modfy this TD)</td>
            <td>blah</td>
        </tr>
        <tr>
            <td>blah</td>
            <td>blah</td>
            <td>blah (modfy this TD)</td>
            <td>blah</td>
        </tr>
        <tr>
            <td>blah</td>
            <td>blah</td>
            <td>blah (modfy this TD)</td>
            <td>blah</td>
        </tr>
</table>

you could maybe add somme rgba color to darken your background-colors: http://jsbin.com/ocezon/9/ http://jsbin.com/ocezon/9/edit

Upvotes: 0

Related Questions