見出し画像

表のスタイリング

表や各セルに枠線をつける

table{border:線の太さ 線の種類 線の色;}

線の重なりを調節する

table{border-collapse:値;}

border-collapseプロパティの値

collapse:隣接するセルの線を重ねる
    /*border-collapse:collapse;で重ねるよう指定した線は相殺される*/
    /*優先度はborder-topよりborder-bottom,border-leftよりもborder-right*
separate:隣接する線の感覚をあける


セルの内側に余白をつける

セレクタ{padding:数値と単位;}

ゼブラ調で表現する[セレクタ:nth-child疑似クラス]

セレクタ:nth-child(値){スタイル;}

nth-child疑似クラス値

odd:奇数のみに適用
even:偶数のみに適用
数字n:適用したい項目の順番の数値
数字n+数字:n番目以降すべてに適用する

記述例 table tr:nth-child(odd){background:#cccccc;}

[セレクタ:nth-of-type(値){スタイル;}

※nth-childと異なり、要素別に順番を数える

この記事が気に入ったらサポートをしてみませんか?