colgroup 要素や col 要素は適用できる CSS のプロパティに制限がある

やりたかったこと

<table>
  <colgroup span="1" style="padding:10px; background:#66c; color:#fff; text-align: center;" />
  <tbody>
    <tr>
      <td>10</td>
      <td>foo</td>
    </tr>
    <tr>
      <td>20</td>
      <td>bar</td>
    </tr>
    <tr>
      <td>30</td>
      <td>baz</td>
    </tr>
  </tbody>
</table>

というHTMLを書いた際に、縦1列目にpadding, background, color, text-alignの指定が適用される想定でした。

問題

上記の HTML を書いた JS Binを見ると分かるように、backgroundの指定以外は適用されていません。なぜ？

分かったこと

W3C の CSS 2.1 の仕様書内にある Tables 17.3 Columnsを見ると分かるのですが、table-columnやtable-column-groupのプロパティが指定されている要素（col要素とcolgroup要素）には、下記4つのプロパティのみ指定できるようです。

• border
  • table要素にborder-collapse: collapse;が指定されている時のみ適用される
• background
• width
• visibility

まとめ

自分が適用したかったスタイルはcolgroup要素やcol要素では適用できないことが分かったので、colgroup要素やcol要素は使わないことにしました。

その代わりに、縦1列目にclassを指定して、そのclassに適用したかったスタイルを指定することにしました。