html - 如何垂直放置<td>颜色？

This question already has answers here:

Can I color table columns using CSS without coloring individual cells?
                                
                                    （8个答案）
                                
                        
                                2年前关闭。
            
                    
我正在使用html创建表，并使用CSS添加一些设计

我已经创建了一个表格并将背景色水平/按行放置，但是我想使其垂直


这是我的html代码

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>

我使用此代码使背景水平/按行

table tr:nth-child(2n-1) td {
  background: #F5F5F5;
}

问题是如何将背景垂直或按列放置？

谢谢！

最佳答案

只需更改css目标，如下所示：

将:nth-child(2n-1)放在td而不是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>

关于html - 如何垂直放置<td>颜色？ ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49333899/