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

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

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. ブログ記事を投稿するためのフォームを作った

    はてなブログのMarkdownによる記事編集画面やesa - 自律的なチームのための情報共有サービスのように、本文の編集画面とリアルタイムプレビューが横並びになるような投稿フォームが個人的に好みです。

  2. ブログを国際化対応した

    当ブログのUIで使う文言を国際化対応しました。

  3. AVA上でsinon.useFakeTimers()を複数のテスト内で実行するとエラーが出る

    最近Sinon.JSのバージョンをv14.0.0に上げたときに、エラーが出てテスト実行が失敗するようになりました。

  4. 自分がアクセシビリティ向上に力を入れる理由

    いま自分は、担当サービスのアクセシビリティ向上を推進する「アクセシビリティタスクフォース」を率いる立場になっています(アクセシビリティタスクフォースについては AbemaTV ABEMA iOS版アプリのアクセシビリティ向上支援 | 事例紹介 | 株式会社コンセント で少し触れられています)。