学ぶ、考える、書き出す。

学習し、自分なりに噛み砕いて、書き出すブログ。

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 に適用したかったスタイルを指定することにしました。

記事を共有する

関連記事

  1. Twitterの右側サイドバーを消す

    Twitter のトレンドを見ると、イラつきを覚えるようになりました。そんなにイラつきを覚えるようなら見なければいいし、そもそも Twitter やめろという話はあります。

  2. CSSを破綻させない

    12/3(土)にCSS を破綻させないという内容をbuilderscon tokyo 2016で話しました。

  3. Nicoのこれまでとこれから

    Bootstrap Advent Calendar 2015 8日目の記事です。

  4. なぜ CSS や Grunt はつらいと言われるのか

    少し主語を大きく書いてしまいましたが、\*.css と gruntfile.js についての話です。