tableデザイン　CSS

テーブル作成時のデザインで少しハマったので忘備録として記録しておきます。

タイトル タイトル
1 テキスト テキストテキストテキストテキストテキストテキスト
2 テキスト テキストテキストテキストテキストテキスト
3 テキスト テキストテキストテキストテキスト
4 テキスト テキストテキストテキストテキストテキスト
5 テキスト テキストテキストテキストテキストテキスト
5 テキスト テキストテキストテキストテキスト
6 テキスト テキストテキストテキストテキストテキスト
7 テキスト テキストテキストテキストテキストテキストテキストテキストテキスト

上記テーブルに適応したCSSは下記のとおりです。


/**テーブル左右ライン消去**/
 table > tbody > tr > th:first-child {
    border-left: none;
}
 table > tbody > tr > th:last-child {
    border-right: none;
}
td:nth-last-child(1) {border-right: none;}
td:nth-child(1) {border-left: none;}

/**テーブルバックグラウンド背景色**/
table tr:nth-child(even) {
  background: #F2F2F2;
}
table > tbody > tr > th {
    background: none;
font-weight: bold;
}