March 8, 2014

表をシンプルにCSSで装飾するときに

表をシンプルに装飾したいときに。thタグを使うなら2行目は不要。tableを用意して、以下のcssを適用するだけ。


table{border-top:solid 1px;border-bottom:solid 1px;}
tr:first-child td{font-weight:bold;text-align:center;}
tr:nth-child(even){ background:#CCCCCC; }

結果

表にスタイルを適用した結果は以下の通り。
項目1項目2
データ1-1データ2-1
データ1-2データ2-2

No comments :

Post a Comment