70

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;
}
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Sander
  • 13,301
  • 15
  • 72
  • 97

4 Answers4

121

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>.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
mercator
  • 28,290
  • 8
  • 63
  • 72
  • so you are saying it just is not possible and he only way to achieve this would be to do it on the TD element itself then – Sander Aug 06 '09 at 12:02
  • Yep. I've added a fix for your example, though that's not going to work if the table gets any more complicated. DisgruntledGoat provides a few more solutions. – mercator Aug 06 '09 at 13:07
  • Both of those suggestions regarding the missing tr inside thead are invalid, too. th doesn't belong in tbody and td doesn't belong in thead. Just add a tr to contain the th's inside thead. – graywh Nov 12 '10 at 15:18
  • @graywh, I agree it's best to keep the `th` in the `thead`, so I've removed my suggestions. It's perfectly valid, and may be appropriate, to have a `th` in the `tbody` or a `td` in the `thead`, though. E.g. a header column can't go in the `thead`, and descriptions of headers could go in `td`s in the `thead`. But neither is probably the case here. – mercator Nov 13 '10 at 02:15
  • @wtjones, that's because IE quirks mode (in any version of IE) is essentially the same as IE5.5 (so don't use it!). If you have no choice, you can make it work in quirks mode the same way as in IE6 (i.e. by setting `text-align` on the `col`/`colgroup` anyway). – mercator Dec 21 '11 at 13:13
  • The elements supports only 3 style rules : border, background, width and visibility. More details: http://stackoverflow.com/a/1238151/1158647 – Misi Jul 22 '15 at 08:27
25

See a similar question: Why is styling table columns not allowed?

You are only allowed to set border, background, width and visibility properties, due to the fact that cells aren't direct descendents of columns, only of rows.

There are a few solutions. The simplest is to add a class to each cell in the column. Unfortunately that means more HTML, but it shouldn't bee a problem if you're generating tables from a database, etc.

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

You could also use td+td to select from the second column onwards (it actually means "select all td elements that have one td element to its left). td+td+td selects from the third column - you can continue in this fashion, overriding properties. Honestly though, it's not great code.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
DisgruntledGoat
  • 70,219
  • 68
  • 205
  • 290
6

With the following CSS, you can just append one or more classes to the the table element in order to align its columns accordingly.

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/

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Fred
  • 12,086
  • 7
  • 60
  • 83
  • true, though small remark: those selectors are `CSS3` selectors, and usable in IE9 and higher. If you need support for lower versions of IE, you cannot use this method. – Sander Aug 14 '13 at 13:02
0

In addition to the limitations mentioned in other answers, as of February 2018, visibility:collapse still does not work on colgroups in Chrome and Chromium based browsers, due to a bug. See CSS col visibility:collapse does not work on Chrome.

So I believe the currently usable properties are just border, background, and width (unless you employ some sort of polyfill for Chrome and other Chromium-based browsers). The bug can be tracked at Issue 174167: visibility:collapse does not work correctly for table columns or rows.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Jacob C.
  • 345
  • 1
  • 16