CSSでのテーブルのデザイン【現役エンジニアが解説】
今回は、CSSでのテーブルのデザインについて、3つの要点に分け、簡単に解説していきます。
枠線の調整
テーブルの枠線は重ねることができます。
border-collapseプロパティの値をcollapseにすると重なります。
table{ border-collapse:collapse; }
上記のコードでは、全てのtable要素の枠線が重なり合うようにしています。
列幅の均等化
テーブルの列幅を均等化することも可能です。
幅を指定したうえで、table-layoutプロパティの値にfixedを指定します。
table{ width:500px; table-layout:fixed; }
上記のコードでは、全てのtable要素に対し、それぞれの列幅を同じサイズにしています。
見出しの背景色
テーブルの見出しのセルのみに背景色を付けられます。
th要素のbackgroundプロパティの値に色を指定すると見出しに背景色が付きます。
th{ background-color:green; }
上記のコードでは、全てのテーブルのth要素の見出しセルに対して、緑色の背景色を付けています。