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. It works well for background color and all. but I 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;
}