Как установить цвет полосатой таблицы для больших рядов (большой ряд с несколькими строками)

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;
}