Style on colgroup not working

Question

I have following colgroup not working properly.

<colgroup class="" style="background-color:#FF0000;"></colgroup>

Please see this jsfiddle. My styles on colgroup not working.

I found that, td has also contain a color. I to override colgroup color. — Imran Qadir Baksh - Baloch, Jan 24 '12 at 08:09

score 6 · Answer 1 · answered Jan 24 '12 at 08:48

Most properties that you can set on colgroup won’t have an effect, since by definitions, table cells inherit properties from tr elements (rows), not columns or column groups (to the extent that there is inheritance).

Set, in CSS, the properties directly on the cell elements. For example, to set the background color of the first two columns, assuming that only td markup is used for the cells, use

td:first-child, td:first-child + td {
  background: #f00;
  color: #fff;
}

This means it is not possible to use colgroup style if your element has this style. Thanks — Imran Qadir Baksh - Baloch, Jan 24 '12 at 09:22

score 2 · Answer 2 · answered Jan 24 '12 at 08:36

Here is an example of colgroup:

<html> <body>

<table width="100%" border="1">   <colgroup style="background-color:#22FF22;"></colgroup>   <colgroup style="background-color:#888888;"></colgroup>   <colgroup style="background-color:#FF0000;"></colgroup>

  <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
  </tr>  
  <tr>
    <td>D</td>
    <td>E</td>
    <td>F</td>  
 </tr>  
 <tr>
    <td>G</td>
    <td>H</td>
    <td>I</td> 
 </tr>
</table>

</body> </html>

if your code is bit different show us the more code to repy appropriately..

Style on colgroup not working

2 Answers2

Linked