Using center text alignment in colgroup

Question

I have a table on my page, I use colgroups to format all the cells in this column the same way, works well for the background color and everything. but it seems it can’t understand why the center of the text alignment is not working. it does not center the text.

example:

<table id="myTable" cellspacing="5"> <colgroup id="names"></colgroup> <colgroup id="col20" class="datacol"></colgroup> <colgroup id="col19" class="datacol"></colgroup> <colgroup id="col18" class="datacol"></colgroup> <thead> <th>&nbsp;</th> <th>20</th> <th>19</th> <th>18</th> </thead> <tbody> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </tbody> </table> 

CSS

 #names { width: 200px; } #myTable .datacol { text-align: center; background-color: red; } 

Answer 1

Only a limited set of CSS properties apply to columns , and text-align does not apply to them.

See “The Secret Why Only Four Properties Relate to Table Columns” for a description of why this is so.

In your simple example, the easiest way to fix this would be to add the following rules:

 #myTable tbody td { text-align: center } #myTable tbody td:first-child { text-align: left } 

This will center all the cells in the table except the first column. This does not work in IE6, but in IE6 text-align really (incorrectly) works on the column. I do not know if IE6 supports all properties or just a larger subset.

Oh, and your HTML is not valid. <thead> skips a <tr> .

Answer 2

See a similar question: Why are style sheet columns not allowed?

You are allowed to set the border , background , width and visibility properties, because the cells are not direct descendants of the columns, only from the rows.

There are several solutions. The simplest thing is to add a class to each cell in the column. Unfortunately this means more HTML, but should not be a problem if you are generating tables from a database, etc.

Another solution for modern browsers (i.e. not IE6) is to use some pseudo classes. tr > td:first-child will select the first cell in the row. Opera, Safari, Chrome, and Firefox 3.5 also support the :nth-child(n) selector, so you can target specific columns.

You can also use td+td to select from the second column ahead (this actually means “select all td elements that have one td element on the left). td+td+td selects from the third column - you can continue this way by overriding the properties. Honestly, this is not great code.

Answer 3

Using the following CSS, you can simply add one or more classes to a table element to align its columns appropriately.

CSS

 .col1-right td:nth-child(1) {text-align: right} .col2-right td:nth-child(2) {text-align: right} .col3-right td:nth-child(3) {text-align: right} 

HTML

 <table class="col2-right col3-right"> <tr> <td>Column 1 will be left</td> <td>Column 2 will be right</td> <td>Column 2 will be right</td> </tr> </table> 

Example: http://jsfiddle.net/HHZsw/