如何垂直放置颜色？

Question

我正在使用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;
}

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

谢谢！

Answer 1

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

只需更改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>