Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

using text-align center in colgroup

i have a table in my page, i use colgroups to format all cells in this column the same way, works good for background color and all. but cannot seem to figure out why text-align center does not work. it does not align the text centered.

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; } 
like image 270
Sander Avatar asked Aug 06 '09 10:08

Sander


People also ask

How do you center align text?

Select the text that you want to center. in the Page Setup group, and then click the Layout tab. In the Vertical alignment box, click Center. In the Apply to box, click Selected text, and then click OK.

How do you center text in center HTML?

The <center> tag was used in HTML4 to center-align text.


1 Answers

Only a limited set of CSS properties applies to columns, and text-align isn't one of them.

See "The mystery of why only four properties apply to table columns" for a description of why this is the case.

In your simple example, the easiest way to fix it would be to add these rules:

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

That would center all table cells, except the first column. This doesn't work in IE6, but in IE6 the text-align does actually (wrongly) work on the column. I don't know if IE6 supports all properties, or just a larger subset.

Oh, and your HTML is invalid. <thead> misses a <tr>.

like image 157
mercator Avatar answered Oct 05 '22 10:10

mercator