How to put color vertically?

Question

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!

score 0 · Answer 1 · answered Mar 17 '18 at 08:14

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>

score 0 · Accepted Answer · answered Mar 17 '18 at 08:15

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>

How to put color vertically?

2 Answers2