テーブルのデザインを変更する

テーブル(tableタグ)のデザインを変更する方法についてご質問があったので、やり方をご紹介します。

▼こちらがテーブルです▼

ここにテキストが入ります ここにテキストが入ります
ここにテキストが入ります ここにテキストが入ります
ここにテキストが入ります ここにテキストが入ります
ここにテキストが入ります ここにテキストが入ります

デフォルトのCSS

デフォルトでは以下のCSSを記述しています。(今後変更するかもしれません)

/* テーブル */
.post-main table {
 border-top: 1px #999 solid;
 border-right: 1px #999 solid;
 margin-bottom: 20px;
 width:100%;
 border-collapse: collapse;
}
.post-main table tr td,.post-main table tr th {
 padding: 5px;
 border-left: 1px #999 solid;
 border-bottom: 1px #999 solid;
 font-size: 14px;
 line-height: 1.4;
}
.post-main table tr:nth-child(even) {
 background-color: #f6f6f6;
}

色を変更する方法

テーブルの色を指定しているのは最後に記述しているこちらのCSS。

.post-main table tr:nth-child(even) {
 background-color: #f6f6f6;
}

これは、偶数番目のセル(2,4,6,8…)の背景色を#f6f6f6(薄いグレー)にするという意味です。

いくつか指定方法のサンプルをご紹介するので参考にしていただければと思います。

最初のセルの背景色をグレー、2行目以降を白にする

.post-main table tr:first-child {
 background-color: #f6f6f6;
}
.post-main table tr:nth-child(even) {
 background-color: #ffffff;
}

奇数番目のセルの背景色を赤、偶数番目のセルの背景色を黒、それぞれのセルの文字色を白にする

.post-main table tr:nth-child(odd) {
 background-color: #ff0000;
 color: #ffffff;
}
.post-main table tr:nth-child(even) {
 background-color: #000000;
 color: #ffffff;
}

カテゴリー 4536マニュアル

7/31までドメイン無料!無料お試しもあり!

この記事が良かったらいいね!最新情報が届きます!

Pickup