2020年Webサイト作成講習会

top > 列を指定して修飾

列を指定して修飾

日付 10代 20代 30代
1/1 80 45 32
1/2 72 65 28
日付 10代 20代 30代
1/1 80 45 32
1/2 72 65 28

列の幅、1列目を50pxに、2列目、3列目、4列目を100pxに、を60pxに設定

tr th:nth-child(1) {
   width: 50px;
}
tr th:nth-child(2),
tr th:nth-child(3) ,
tr th:nth-child(4) {
   width: 100px;
}

列幅を同左に設定した上で、1列目・4列目と3列目に異なる背景色を設定

tr th:nth-child(1) {
   width: 50px;
}
tr th:nth-child(2),
tr th:nth-child(3),
tr th:nth-child(4) {
   width: 100px;
}
tr th:nth-child(2),
tr th:nth-child(4),
tr td:nth-child(2),
tr td:nth-child(4) {
   background-color: #e0ffff;
}
tr td:nth-child(3),
tr td:nth-child(3) {
   background-color: #ffebcdf;
}