Menu
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>
209
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.
197
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
