Question

我正在尝试用灰色和白色分隔表格行的背景色。但是，该表具有一个大行，其中使用rowspan =“ x”在其中包含多个小行。有什么方法可以更改其中大行和小行的背景颜色？

我无法手动设置背景，因为其中的行数是动态的。

     <table class="table table-striped table-bordered reportTable" id="contentToConvert">
        <thead style="text-align: center">
           <tr>
              <th scope="col" rowspan="2" style="width: 10%; vertical-align: middle;">Order #</th>
              <th scope="col" rowspan="2" style="width: 20%; vertical-align: middle;">Customer Information</th>
              <th scope="col" rowspan="2" style="width: 10%; vertical-align: middle;">Package(s)</th>
              <th scope="col" colspan="5" style="width: 60%; vertical-align: middle;">Package Information</th>
           </tr>
           <tr>
              <th style="width: 15%; vertical-align: middle">Tracking Number</th>
              <th style="width: 10%; vertical-align: middle">Size</th>
              <th style="width: 10%; vertical-align: middle">Weight</th>
              <th style="width: 15%; vertical-align: middle">Instructions</th>
              <th style="width: 10%; vertical-align: middle">Status</th>
           </tr>
        </thead>
        <tbody>
           <tr>
              <td rowspan="5">RetailOrder_12513413</td>
              <td rowspan="2" style="padding-left: 1rem">
                 John Doe <br>
                 123 street <br>
                 Akron OH 44307<br>
                 123-456-7890<br>
                 john.doe@gmail.com
              </td>
              <td rowspan="2" style="text-align: center">5</td>
              <td style="text-align: center; vertical-align: middle">018635013640123401234</td>
              <td style="text-align: center; vertical-align: middle">5 / 5/ 5 inches</td>
              <td style="text-align: center; vertical-align: middle">10 lbs 10 oz</td>
              <td style="text-align: center; vertical-align: middle"></td>
              <td style="text-align: center; vertical-align: middle">Delivered</td>
           </tr>
           <tr>
              <td style="text-align: center; vertical-align: middle">018635013640123401234</td>
              <td style="text-align: center; vertical-align: middle">5 / 5/ 5 inches</td>
              <td style="text-align: center; vertical-align: middle">10 lbs 10 oz</td>
              <td style="text-align: center; vertical-align: middle">Leave at front door</td>
              <td style="text-align: center; vertical-align: middle">Delivered</td>
           </tr>
           <tr>
              <td rowspan="2">RetailOrder_0023</td>
              <td rowspan="2" style="padding-left: 1rem">
                 George Jason <br>
                 123 Arlington street <br>
                 Arlington VA 22222<br>
                 123-456-7890<br>
                 GEORGE.Jason@gmail.com
              </td>
              <td rowspan="2" style="text-align: center">3</td>
              <td style="text-align: center; vertical-align: middle">5134134231231261341231</td>
              <td style="text-align: center; vertical-align: middle">5 / 5/ 5 inches</td>
              <td style="text-align: center; vertical-align: middle">10 lbs 10 oz</td>
              <td style="text-align: center; vertical-align: middle"></td>
              <td style="text-align: center; vertical-align: middle">Delivered</td>
           </tr>
           <tr>
              <td style="text-align: center; vertical-align: middle">018635013640123401234</td>
              <td style="text-align: center; vertical-align: middle">5 / 5/ 5 inches</td>
              <td style="text-align: center; vertical-align: middle">10 lbs 10 oz</td>
              <td style="text-align: center; vertical-align: middle">Leave at front door</td>
              <td style="text-align: center; vertical-align: middle">Delivered</td>
           </tr>
        </tbody>
     </table>

Answer 1

此代码将为您的表格提供其他颜色

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

如何为大行（多行大行）设置表格条纹的颜色

1 个答案: