読者です 読者をやめる 読者になる 読者になる

CSSでテーブルの行毎に色を変える(しましま)にする

f:id:rankasan:20170313231450j:plain

テーブルを表示する際、特に行の多いテーブルは、そのままでは見辛いものです。行ごと背景色を変えて見やすくしているページがありますね。あのやり方です。CSSに少し手を加えるだけで出来ます

サンプルCSS

表示は下記の様になります

りんご 120円
みかん 20円
豚肉 98円
里芋 150円

e:nth-child(n)擬似クラスは、指定された要素en番目にスタイルを適用します。またnには数値だけではなくodd(奇数)、even(偶数)を指定できます。上記サンプルでは、クラスlistの要素trに対してodd、evenそれぞれに別の色を指定しています

プライバシーポリシー