▽1
●
rouge_2008 ●150ポイント ベストアンサー |
colおよびcolgroupでは、フォント関連の装飾に関するプロパティは無効のようです。
・CSS - col要素に有効なプロパティ
http://www.d-spica.com/try/col.html
・col/colgroup 要素で有効なスタイルと無効なスタイル。
http://blog.btmup.com/xhtml/col-colgroup-css.html
※上記記事のリンク先「第25回 tableをもっと見やすくデザインする」(http://itpro.nikkeibp.co.jp/article/COLUMN/20080730/311764/)の説明が詳しいです。(※該当箇所は2ページ目にありますが、閲覧するにはログインが必要です。)
IE9以降およびモダンブラウザに対応していればいいのでしたら、次のようにnth-child(n)を使って指定してみてください。
td:nth-child(1), td:nth-child(2) { background-color: green; color: red; }
・<colgroup> - テーブルのカラム設定
http://www.tohoho-web.com/html/colgroup.htm
※古いブラウザにも適用させたい場合は、個別にクラスを割り当てて指定するしかないと思います。
(IE8以下の対応も要る場合)
CSSの「隣接セレクタ」を利用すれば左2列だけに色を付けることができます。
隣接セレクタの説明は外部サイトを参照してください。
隣接セレクタ - CSS | MDN
今回の場合は以下のように2ステップで期待通りの表示ができます。
td{ background: green; color: red; } td + td + td { background: none; color: black; }
デモ
http://jsbin.com/gist/6419948
それから他の方法で対処するとしても、HTMLで以下の点を直す必要があります。