Why colgroup/col doesn't work in Chrome

Question

One of the answers to my previous question states that colgroup/col should work in IE only.

I've wrote an example (see below) that works on IE9 (centers cells content in the the 3rd column), but doesn't work on the latest version of Chrome.

What I did wrong?

Example of HTML:

<html>
<head><title>test table centerring</title></head>
<body>

    <table border="1">
        <colgroup>
            <col/>
            <col/>
            <col align="center">
        </colgroup>
        <thead>
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>Value</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Name 1</td>
                <td>Value 1</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Name 2, Name 2, Name 2, Name 2</td>
                <td>Value 2</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Name 3</td>
                <td>Value 3</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Name 4</td>
                <td>Value 4, Value 4, Value 4, Value 4</td>
            </tr>
        </tbody>
    </table>        

</body></html>

They stated that it works in IE only, that means it won't work in Chrome. — ricochet1k, Apr 23 '12 at 23:09

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

Actually, I was pretty sure that only IE supports that, but was confused by one of the answers to question Is there any way to center certain columns in table?. The author of answer pointed also to some restrictions: http://www.quirksmode.org/css/columns.html

Unfortunately table columns are quite hard to use, because if you use them you essentially have a table that's subdivided in two ways: by rows and by columns. The general rule is that any style defined on a row overrules any style defined on a column.

Secondly, W3C specifies that only a few declarations may be used on columns: border, background, width and visibility. Exception: IE7 and lower allow all declarations.

Thirdly, there's some confusion whether the column styles are applied to the column as a whole, or to the individual <td>s contained by it. The border declaration seems to be applied to the column as a whole, but width is applied to the individual cells.

That made colgroup/col pretty much useless for centering.

Why colgroup/col doesn't work in Chrome

1 Answers1

Linked