title: Getting alternate rows to be different colors in a pdf
body: <p>I've created a pdf and now I'm trying to style it. I've been sort of successfully on most of it, but I can't get my rows to be different colour. What I would like to happen is that with every odd row it needs to be a certain colour. I'm also having a problem with getting my font to work as well and I'm not understanding why. </p>
  
  <p>I'm also using laravel and barryvdh/laravel-dompdf to create my pdf.</p>
  
  <p>Here is my pdf</p>
  
  <pre><code>&lt;html style="margin: 0; padding: 0;"&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;
          &lt;title&gt;{{ $order-&gt;invoice_number }}&lt;/title&gt;
  
          &lt;style&gt;
              body{
                  font-family: Arial;
              }
  
              .invoice_table .table {
                  display: table;
                  width: 100%;
              }
  
              .invoice_table .table .thead {
                  display: table-header-group;
              }
  
              .invoice_table .table .tr {
                  display: table-row;
              }
  
              .invoice_table .table .thead .tr .th {
                  display: table-cell;
              }
  
              .invoice_table .table .thead .th {
                  padding: 13px 0 12px;
              }
  
              .invoice_table .table .tbody {
                  display: table-row-group;
              }
  
              /* CODE TO MAKE THE ROWS A DIFFERENT COLOUR */
              .invoice_table .table .tbody .tr:nth-child(odd){
                  background-color: #4C8BF5;
                  color: #fff;
              }
  
              .invoice_table .table .tr .td {
                  display: table-cell;
              }
  
              .invoice_table .table .tbody .td {
                  padding: 20px 0;
              }
          &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body style="margin: 0; padding: 0;"&gt;
          &lt;div class="invoice_table" style="width: 700px; margin: 30px auto;"&gt;
              &lt;div class="table" style="border: 1px solid #000;"&gt;
                  &lt;div class="thead" style="border: 1px solid #000;"&gt;
                      &lt;div class="tr" style="border: 1px solid #000;"&gt;
                          &lt;div class="th"&gt;&lt;/div&gt;
                          &lt;div class="th" style="border: 1px solid #000;"&gt;Description&lt;/div&gt;
                          &lt;div class="th" style="text-align: center; border: 1px solid #000;"&gt;Qty&lt;/div&gt;
                          &lt;div class="th" style="text-align: center; border: 1px solid #000;"&gt;Unit Price&lt;/div&gt;
                          &lt;div class="th" style="text-align: center; border: 1px solid #000;"&gt;Total Price&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="tbody"&gt;
                      @foreach($order_item-&gt;items as $item)
                          &lt;div class="tr"&gt;
                              &lt;div class="td"&gt;&lt;/div&gt;
                              &lt;div class="td" style="border: 1px solid #000;"&gt;
                                  {{ $item['item']['title'] }}
                              &lt;/div&gt;
                              &lt;div class="td" style="text-align: center; border: 1px solid #000;"&gt;
                                  {{ $item['qty'] }}
                              &lt;/div&gt;
                              &lt;div class="td" style="text-align: center; border: 1px solid #000;"&gt;
                                  R {{ $item['item']['price'] }}
                              &lt;/div&gt;
                              &lt;div class="td" style="text-align: center; border: 1px solid #000;"&gt;
                                  R {{ $item['price'] }}
                              &lt;/div&gt;
                          &lt;/div&gt;
                      @endforeach
  
                      &lt;div class="tr"&gt;
                          &lt;div class="td" rowspan="3" colspan="3" style="padding: 50px 0 5px 0; border: 1px solid #000;"&gt;&lt;/div&gt;
                          &lt;div class="td" style="text-align: right; padding: 50px 0 5px 0; border: 1px solid #000;"&gt;
                              SUBTOTAL:
                          &lt;/div&gt;
                          &lt;div class="td" style="text-align: center; padding: 50px 0 5px 0; border: 1px solid #000;"&gt;
                              R {{ $order_item-&gt;totalPrice }}
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      @if(!empty($order-&gt;delivery_fee))
                          &lt;div class="tr"&gt;
                              &lt;div class="td" style="text-align: right; padding: 0 0 5px 0; border: 1px solid #000;"&gt;
                                  DELIVERY FEE:
                              &lt;/div&gt;
                              &lt;div class="td" style="text-align: center; padding: 0 0 5px 0; border: 1px solid #000;"&gt;
                                  R {{ $order-&gt;delivery_fee }}
                              &lt;/div&gt;
                          &lt;/div&gt;
                      @endif
  
                      &lt;div class="tr"&gt;
                          &lt;div class="td" style="text-align: right; padding: 0; border: 1px solid #000;"&gt;
                              TOTAL:
                          &lt;/div&gt;
                          &lt;div class="td" style="text-align: center; padding: 0; border: 1px solid #000;"&gt;
                              R {{ $order-&gt;order_price }}
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>