The colgroup and col structure is like a directive that specifies table formatting outside of the normal flow. Notice that the col tags do not get closed in HTML5, and the cascade is irregular. Normally the cascade applies to children, but the rows and cells in the table are not children or grandchildren of the col or colgroup. The relationship is more like stepchildren. Because of the irregular relationship, the CSS specificity appears to be quirky. Its not really, but it is not always as expected. To insure the the correct application of both the colgroup rules and the other rules being applied to the tr and td tags the colgroup rules should be applied in line, or be the final rule in the style entries.

HTML:
<table>
<colgroup>
<col id="col1" span="2"> 
<col id="col2" span="2">
</colgroup>
<thead> ... etc ...
CSS:
#col1   {background-color:dodgerblue;}
#col2   {background-color:silver;}