<table>
<tr>
<td rowspan="2">Mon hoc</td>
<td colspan="7">Thoi khoa bieu</td>
</tr>
<tr>
<td>T2</td>
<td>T3</td>
<td>T4</td>
<td>T5</td>
<td>T6</td>
<td>T7</td>
<td>CN</td>
</tr>
<tr>
<td>Mon toan</td>
<td>X</td>
<td>O</td>
<td>X</td>
<td>O</td>
<td>X</td>
<td>O</td>
<td>O</td>
</tr>
<tr>
<td>Mon van</td>
<td>X</td>
<td>O</td>
<td>X</td>
<td>O</td>
<td>X</td>
<td>O</td>
<td>O</td>
</tr>
<tr>
<td>Mon toan</td>
<td>X</td>
<td>O</td>
<td>X</td>
<td>O</td>
<td>X</td>
<td>O</td>
<td>O</td>
</tr>
<tr>
<td>Mon van</td>
<td>X</td>
<td>O</td>
<td>X</td>
<td>O</td>
<td>X</td>
<td>O</td>
<td>O</td>
</tr>
<tr>
<td>Mon toan</td>
<td>X</td>
<td>O</td>
<td>X</td>
<td>O</td>
<td>X</td>
<td>O</td>
<td>O</td>
</tr>
</table>
table{
/* border: 1px solid #000;
border-spacing: 0;*/
border-collapse: collapse;
}
td{
border: 1px solid #000;
padding: 1em;
}
tr:first-child td{
background-color: grey;
font-weight: bold;
text-align: center;
color: #fff;
}
tr:nth-child(2) td{
background-color: blue;
color: white;
}
/* tr:nth-child(n+3):nth-child(-n+7):nth-child(2n+1) td:nth-child(1){
background-color: yellow;
font-weight: bold;
}
tr:nth-child(n+3):nth-child(-n+7) td:nth-child(2n){
background-color: green;
color: white;
}
tr:nth-child(n+3):nth-child(-n+7) td:nth-child(2n+1):not(:nth-child(1)){
background-color: orange;
color: white;
}
tr:nth-child(n+3):nth-child(-n+7) td:nth-child(8){
background-color: red;
color: white;
} */
tr:nth-child(odd):nth-child(n+3){
background-color: #ccc;
}
tr:nth-child(n+3):nth-child(2n){
background-color: #eee;
}
tr:not(:nth-child(-n+2)) td:nth-child(even){
color: green;
}
tr:nth-child(n+3) td:nth-child(odd):not(:first-child){
color: purple;
}
tr:nth-child(n+2) td:last-child{
color: red;
}
tr:nth-child(n+3) td:first-child{
font-weight: bold;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.