Styling col and/or colgroup

HTML & CSS
1

I’m trying to style a table so that some columns align right, others align left and others align center. The actual table is dynamically generated with Javascript so it’s difficult to assign styles to the tds. I thought I might be able to use colgroup and/or col, but so far, everything I’ve tried has failed. I’ve tried using the align attribute with both colgroup and col. Then I created ids for each colgroup with the appropriate text-align values but that doesn’t work, either. It picks up the background-color in the ids, but not the text-align. I tried putting the ids on col tags instead of the colgroup tag but still a no-go. Can someone help?

Here’s a sample of the most recent thing I’ve tried (I’ll get rid of the inline styles - this is just a test table I’ve been playing with):


<style>
table {
	border-collapse:collapse;
	}
	
table td, table th  {
	padding:3px;
	vertical-align:bottom;
	border:1px solid #ccc;
	}
	
table th {
	vertical-align:middle;
	}

#insStyles {
	background-color:#efede4;
	}
	
#payStyles {
	background-color:#e7ece6;
	text-align:right;
	}
	
#finishStyles {
	background-color:#f4ece0;
	text-align:center;
	}

</style>
</head>

<body>
<table id="insp_session_list">			
			
				<colgroup></colgroup>
				<colgroup span="3" id="insStyles"></colgroup>					
				<colgroup span="3" id="payStyles"></colgroup>
				<colgroup span="4"></colgroup>
				<colgroup id="finishStyles"></colgroup>
			
				<tr>
					<td style="border-left:none; border-top:none;" >&nbsp;</td>
					<td colspan="3" style="text-align:center; font-weight:bold;">Insurance Info</td>
					<td colspan="3" class="textCenter" style="text-align:center; font-weight:bold; ">Payment Info</td>
					<td colspan="4" style="border-right:none; border-top:none;" >&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
				
				<tr>
					<th>Session Date</th>
					<th>Client</th>
					<th>Ins ID</th>
					<th>Ins<br />Type</th>
					<th>Fee</th>
					<th>Previous<br />Ins Pmt</th>		
					<th>Pmt<br />Date</th>		
					<th>Amt<br />Paid</th>			
					<th>Amt <br />Allowed</th>
					<th>Deductible</th>
					<th>Other<br />Ins Adj</th>
					<th>Finish</th>
				</tr>
				
				<tr>
					<td>12/12/2010</td>
					<td>Brown, Jennifer</td>
					<td>1235666A-1</td>
					<td>P</td>
					<td>n/a</td>
					<td>$0.00</td>	
					<td>&nbsp;</td>					
					<td><input type="text" size="3" name="" value="" class="noMargin" /></td>
					<td><input type="text" size="3" name="" value="" class="noMargin" /></td>
					<td><input type="text" size="3" name="" value="" class="noMargin" /></td>
					<td><input type="text" size="3" name="" value="" class="noMargin" /></td>
					<td><input type="checkbox" name="" value="" /></td>
				</tr>
				
				<tr>
					<td>03/07/2010</td>
					<td>Clark, Don</td>
					<td>335926A-1</td>
					<td>P</td>
					<td>n/a</td>
					<td>$30.00</td>	
					<td><a href="#">03/07/2010</a></td>	
					<td><input type="text" size="3" name="" value="" class="noMargin" /></td>		
					<td><input type="text" size="3" name="" value="" class="noMargin" /></td>
					<td><input type="text" size="3" name="" value="" class="noMargin" /></td>
					<td><input type="text" size="3" name="" value="" class="noMargin" /></td>
					<td><input type="checkbox" name="" value="" /></td>
				</tr>	
				
				<tr>
					<td>02/27/2010</td>
					<td>Dunstun, Ernst</td>
					<td>HU-2559-12355</td>
					<td>S</td>
					<td>n/a</td>
					<td>$20.00</td>	
					<td><a href="#">03/07/2010</a></td>
					<td><input type="text" size="3" name="" value="" class="noMargin" /></td>						
					<td><input type="text" size="3" name="" value="" class="noMargin" /></td>
					<td><input type="text" size="3" name="" value="" class="noMargin" /></td>
					<td><input type="text" size="3" name="" value="" class="noMargin" /></td>
					<td><input type="checkbox" name="" value="" /></td>
				</tr>	
				
				<tr>
					<td>02/16/2010</td>
					<td>Smith, June</td>
					<td>OH235999s-2</td>
					<td>P</td>
					<td>$120.00</td>
					<td>$15.00</td>
					<td><a href="#">02/27/2010</a></td>
					<td><input type="text" size="3" name="" value="" class="noMargin" /></td>	
					<td><input type="text" size="3" name="" value="" class="noMargin" /></td>
					<td><input type="text" size="3" name="" value="" class="noMargin" /></td>
					<td><input type="text" size="3" name="" value="" class="noMargin" /></td>
					<td><input type="checkbox" name="" value="" /></td>
				</tr>	
				
				<tr>
					<td>02/08/2010</td>
					<td>Smith, June</td>
					<td>OH235999s-2</td>
					<td>P</td>
					<td>$120.00</td>
					<td>$10.00</td>
					<td><a href="#">02/16/2010</a></td>
					<td><input type="text" size="3" name="" value="" class="noMargin" /></td>
					<td><input type="text" size="3" name="" value="" class="noMargin" /></td>
					<td><input type="text" size="3" name="" value="" class="noMargin" /></td>
					<td><input type="text" size="3" name="" value="" class="noMargin" /></td>
					<td><input type="checkbox" name="" value="" /></td>
				</tr>					
			</table>
2

Hi,

No you won’t be able to do that I’m afraid as the only properties you can style on those elements are as follows:

  • border
  • background
  • width
  • visibility

Anything else is not allowed by the specs (although iirc ie6 will allow color also).

More info here.

3

Thanks. At least now I can stop beating my head against the wall. What’s the best way to do this when it’s not easy to access the actual tds? We can’t use nth-child because of IE.

4

If the number of cells is constant you could do something like this for ie7 and above.


#insp_session_list td+td+td+td+td {    text-align:right;}
#insp_session_list td+td+td+td+td+td+td+td{text-align:center;}
5

Ok, thanks. I’ll play with that.

6

Ok, related question. Are there shortcuts when you have to do a whole list of nth child and/or td+td+td’s? For example, instead of this:


table#insp_session_list > tbody > tr > td:nth-child(4), table#insp_session_list > tbody > tr > td:nth-child(12) {text-align:center;}

I sure would like to do something like this (except it doesn’t work :slight_smile: )


table#insp_session_list > tbody > tr > td:nth-child(4,12) {text-align:center;}
7

worthy of note and question:

it may be allowing you to change the the bg-color, after all the bg-color is PART of the background property. But you have to be careful of your stacking order… COLGROUPs are rendered bellow TRs and TDs, so any color styling would be covering up the BG of the COLGROUP.

Tho not mentioned above, you also CANT apply pseudo classes ( COLGROUP:hover) so styling is quite limited for this table element.

As far as the shortcut…

The simple answer is no. What you had written originally is considered a CSS shortcut already, in a sense. CSS is allowing you to declare the same attributes for multiple selector at once by separating the selectors with commas, but that’s as far as it goes.

Remeber that the Nth child pseudo-class is also not supported by older browsers, like IE. Well I 9 supports it. but it’s beta. If you still want to use the Nth-Child pseudo, you could take advantage that it does like MATH and write it … td:nth-child(4+8n) … tho my math may be little off tonight. The idea is that it will select the fourth child, and again every 8 more… predictably, if your table has 20 cells, it will be selected as well

8

Thanks for the info. So if I also want to do zebra-striping . . . maybe use RGBA on the COLGROUPs and set the opacity a bit lower so the stripes show through?

9

Yeah, I saw that solution but the columns I need to select don’t follow a pattern so I guess I’m stuck writing them all out. Thanks for the info, though. I always wonder if a solution exists that I just haven’t discovered so it’s helpful to know it’s not possible.

10

The COLGROUP is at the BOTTOM of the stack, so if you plan to use RBGA you need to set the ALPHA to a lower number on tags like TR and TD, as they would be the ones on top.

As far as zebra striping goes, it might be simpler to make a class and just apply it to the tr when needed, since there is no pattern.