How to put <td> color vertically? [duplicate] - html

Question

This question already has answers here:
Can I color table columns using CSS without coloring individual cells?
(8 answers)
Closed 4 years ago.
I'm creating a table using html and add some designs using css
I already created a table and put background color horizontally/ by row like this but i want to make it vertical
and here's my html code
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 20px;
}
table tr:nth-child(2n-1) td {
background: #F5F5F5;
}
table th,
table td {
text-align: center;
}
table th {
padding: 5px 20px;
color: #5D6975;
border-bottom: 1px solid #C1CED9;
white-space: nowrap;
font-weight: normal;
}
table .service,
table .desc {
text-align: left;
}
table td {
padding: 20px;
text-align: right;
}
table td.service,
table td.desc {
vertical-align: top;
}
table td.unit,
table td.qty,
table td.total {
font-size: 1.2em;
}
table td.grand {
border-top: 1px solid #5D6975;;
}
<main>
<table border="1">
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
<td class="service"><span style="color:#ac0043">房间号 ( UNIT NO. )</span></td>
<td class="service"><span style="color:#ac0043">费用 ( RATE )</span></td>
</tr>
<tr>
<td class="service"></td>
<td class="service">AED: /-</td>
</tr>
<tr>
<td class="service"></td>
<td class="service"></td>
</tr>
<tr>
<td class="service">5% VAT（增值税）</td>
<td class="service">AED: /-</td>
</tr>
<tr>
<td class="service"></td>
<td class="service"></td>
</tr>
<tr>
<td class="service"><span style="color:#ac0043">TOTAL (共计):</span></td>
<td class="service"><span style="color:#ac0043">AED:</span> /-</td>
</tr>
</tbody>
</table>
</main>
I use this code to make background horizontal/by row
table tr:nth-child(2n-1) td {
background: #F5F5F5;
}
The question is how can i put the background vertically or by columns?
Thanks!

Answer 1

Just change the css target, like this:
put :nth-child(2n-1) on td, instead of tr
table tr td:nth-child(2n-1) {
background: #F5F5F5;
}
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 20px;
}
table tr td:nth-child(2n-1) {
background: #F5F5F5;
}
table th,
table td {
text-align: center;
}
table th {
padding: 5px 20px;
color: #5D6975;
border-bottom: 1px solid #C1CED9;
white-space: nowrap;
font-weight: normal;
}
table .service,
table .desc {
text-align: left;
}
table td {
padding: 20px;
text-align: right;
}
table td.service,
table td.desc {
vertical-align: top;
}
table td.unit,
table td.qty,
table td.total {
font-size: 1.2em;
}
table td.grand {
border-top: 1px solid #5D6975;;
}
<main>
<table border="1">
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
<td class="service"><span style="color:#ac0043">房间号 ( UNIT NO. )</span></td>
<td class="service"><span style="color:#ac0043">费用 ( RATE )</span></td>
</tr>
<tr>
<td class="service"></td>
<td class="service">AED: /-</td>
</tr>
<tr>
<td class="service"></td>
<td class="service"></td>
</tr>
<tr>
<td class="service">5% VAT（增值税）</td>
<td class="service">AED: /-</td>
</tr>
<tr>
<td class="service"></td>
<td class="service"></td>
</tr>
<tr>
<td class="service"><span style="color:#ac0043">TOTAL (共计):</span></td>
<td class="service"><span style="color:#ac0043">AED:</span> /-</td>
</tr>
</tbody>
</table>
</main>

Answer 2

table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 20px;
}
table tr td:nth-child(2n-1) {
background: #F5F5F5;
}
table th,
table td {
text-align: center;
}
table th {
padding: 5px 20px;
color: #5D6975;
border-bottom: 1px solid #C1CED9;
white-space: nowrap;
font-weight: normal;
}
table .service,
table .desc {
text-align: left;
}
table td {
padding: 20px;
text-align: right;
}
table td.service,
table td.desc {
vertical-align: top;
}
table td.unit,
table td.qty,
table td.total {
font-size: 1.2em;
}
table td.grand {
border-top: 1px solid #5D6975;;
}
<main>
<table border="1">
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
<td class="service"><span style="color:#ac0043">房间号 ( UNIT NO. )</span></td>
<td class="service"><span style="color:#ac0043">费用 ( RATE )</span></td>
</tr>
<tr>
<td class="service"></td>
<td class="service">AED: /-</td>
</tr>
<tr>
<td class="service"></td>
<td class="service"></td>
</tr>
<tr>
<td class="service">5% VAT（增值税）</td>
<td class="service">AED: /-</td>
</tr>
<tr>
<td class="service"></td>
<td class="service"></td>
</tr>
<tr>
<td class="service"><span style="color:#ac0043">TOTAL (共计):</span></td>
<td class="service"><span style="color:#ac0043">AED:</span> /-</td>
</tr>
</tbody>
</table>
</main>