title: Custom Invoice Table
body: <p>I'm trying to edit our Shopify 'New Order Notification' email and create a custom table to organize the information a bit better. </p>
  
  <p>It should look like this on desktop, but I'd like to have the totals lined up with the 'line price' column.</p>
  
  <p><a href="https://i.stack.imgur.com/kRv5F.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kRv5F.png" alt="enter image description here"></a></p>
  
  <p>On mobile, it looks like this the totals aren't aligned and the 'totals' table doesn't have a 100% width.</p>
  
  <p><a href="https://i.stack.imgur.com/TOJoP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TOJoP.png" alt="enter image description here"></a></p>
  
  <p>I know I obviously need to add mobile queries, which I tried &amp; removed, I just got tired of trying &amp; brought my issue here.</p>
  
  <p>What styles or edits should I make to make both tables 100% on desktop &amp; mobile, and how do I align the totals with the last column of the top table?</p>
  
  <p>Here's my CSS:</p>
  
  <pre><code>/* general styles */
  
  .main-container {
      width: 80%;     
  }   
  
  table, tr, td, th {
      border-collapse: collapse;
  }
  
  table {     
      width: 100%;
  }
  
  /* table-1-items styles */
  
  
  .table-1-headers {
      background-color: #00a850;
      color: white;
      font-weight: bold;
      border-bottom: 2px solid black;
  }
  
  .table-1-headers td {
      height: 50px;
      vertical-align: middle;
  }
  
  .left-justify {
      text-align: left;   
  }
  
  .center-justify  {
      text-align: center; 
  }
  
  .header-item {
      padding-left: 20px;
  }
  
  .item-image,
  .item-title,
  .item-sku,
  .item-price,
  .item-qty,
  .total-line-price,
  .header-item-price,
  .header-qty,
  .header-line-price {
      padding-right: 20px;
  }
  
  .spacer {
      height: 15px;
  }
  
  /* table-2-totals styles */
  
  .table-2-totals {
      border-top: 2px solid black;
  }
  
  .totals-row-1 {
      padding-top: 15px;  
  }
  
  .order-instructions {
      font-weight: bold;
      vertical-align: top;
      padding: 10px 30px 5px 5px;
      white-space: nowrap;
  }
  
  .order-instructions span {
      background-color: yellow;
      font-weight: normal;
  }
  
  .totals-header {
      font-weight: bold;
      text-align: right;
      border-left: 2px solid black;
      padding-left: 8px;
  }
  
  .totals {
      text-align: right;
      padding-right: 22px !important;
      min-width:101px !important;
  }
  
  .subtotal-header,
  .subtotal-input {
      padding-top: 10px;
  }
  </code></pre>
  
  <p>And my HTML:</p>
  
  <pre><code>&lt;p&gt;Hello {{ shop_name }},&lt;/p&gt;
  
  &lt;p&gt;{% if customer.name %}&lt;b&gt;{{ customer.name }}&lt;/b&gt;{% else %}Someone{% endif %} placed a new order with your store, {{ date | date: "%b %d %I:%M%p" }}:&lt;/p&gt;
  
  &lt;div class="main-container"&gt;
  &lt;table class="table-1-items"&gt;
  
      &lt;tr class="table-1-headers" &gt;
          &lt;td colspan="2" class="header-item left-justify" &gt;Item&lt;/td&gt;
          &lt;td class="header-sku left-justify"&gt;SKU&lt;/td&gt;
          &lt;td class="header-item-price center-justify"&gt;Item Price&lt;/td&gt;
          &lt;td class="header-qty center-justify"&gt;Qty&lt;/td&gt;
          &lt;td class="header-line-price center-justify"&gt;Line Price&lt;/td&gt;
      &lt;/tr&gt;
      {% for line in line_items %} 
      &lt;tr class="item-line"&gt; 
          &lt;td class="item-image center-justify"&gt;&lt;img src="{{ line | img_url: 'thumb' }}" alt="Item Image" /&gt;&lt;/td&gt;
          &lt;td class="item-title left-justify"&gt;{{ line.title }}&lt;/td&gt;
          &lt;td class="item-sku left-justify"&gt;{{ line.sku | lowcase }}&lt;/td&gt;
          &lt;td class="item-price center-justify"&gt;{{ line.price | money }}&lt;/td&gt;
          &lt;td class="item-qty center-justify"&gt;{{ line.quantity }}&lt;/td&gt;
          &lt;td class="total-line-price center-justify"&gt;{{ line.line_price | money }}&lt;/td&gt;
      &lt;/tr&gt;
      {% endfor %}
      &lt;tr class="spacer"&gt;&lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;table class="table-2-totals"&gt;
      &lt;tr class="totals-row-1"&gt;
          &lt;td rowspan="7" class="order-instructions"&gt;ORDER NOTE/SPECIAL INSTRUCTIONS&lt;br&gt;&lt;span&gt;{{ note }}&lt;/span&gt;&lt;/td&gt;
          &lt;td class="totals-header subtotal-header"&gt;Subtotal:&lt;/td&gt;
          &lt;td class="totals subtotal-input"&gt;{{ subtotal_price | money }}&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="totals-header"&gt;Tax:&lt;/td&gt;
          &lt;td class="totals"&gt;{{ total_tax | money }}&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="totals-header"&gt;Rate:&lt;/td&gt;
          &lt;td class="totals"&gt;{{ tax_line.rate }}&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="totals-header"&gt;Discounts:&lt;/td&gt;
          &lt;td class="totals"&gt;{{ discounts_amount | money }}&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="totals-header"&gt;Shipping:&lt;/td&gt;
          &lt;td class="totals"&gt;{{ shipping_price | money }}&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="totals-header"&gt;Total:&lt;/td&gt;
          &lt;td class="totals"&gt;{{ total_price | money }}&lt;/td&gt;
      &lt;/tr&gt;                        
  &lt;/table&gt;
  
  &lt;/div&gt;
  
  &lt;br&gt;
  &lt;br&gt;
  &lt;a href="https://{{ shop.permanent_domain }}/admin/orders/{{ id }}"&gt;View order {{order_name}} &lt;/a&gt;
  &lt;br&gt;
  
  {% if fulfillment_aborted %}
  &lt;p&gt;The above order was not automatically fulfilled because it was flagged as suspicious.&lt;/p&gt;{% endif %}
  &lt;br&gt;
  
  {% if has_high_risks? %}&lt;p&gt;&lt;b&gt;Security check:&lt;/b&gt;&lt;/p&gt;
  &lt;p&gt;This order has a risk of being fraudulent. Review the order in your store's admin and contact the customer to verify their information.&lt;/p&gt;
  {% endif %}
  &lt;br&gt;
  
  &lt;p&gt;&lt;b&gt;Customer Email: &lt;/b&gt;{{ email }}&lt;/p&gt;
  &lt;p&gt;&lt;b&gt;Customer Company: &lt;/b&gt;{{ billing_address.company }}&lt;/p&gt;
  
  &lt;br&gt;
  &lt;p&gt;&lt;b&gt;Payment processing method:&lt;/b&gt;&lt;/p&gt;
  &lt;p&gt;{{ gateway }}&lt;/p&gt;
  &lt;br&gt;
  
  {% if requires_shipping and shipping_address %}
  &lt;p&gt;&lt;b&gt;Delivery method:&lt;/b&gt;&lt;/p&gt;
  {% for shipping_method in shipping_methods %}&lt;p&gt;{{ shipping_method.title }}&lt;/p&gt;{% endfor %}
  
  &lt;br&gt;
  &lt;p&gt;&lt;b&gt;Shipping address:&lt;/b&gt;&lt;/p&gt;
  &lt;p&gt;{{ shipping_address.name }}&lt;/p&gt;
  &lt;p&gt;{{ shipping_address.street }}&lt;/p&gt;
  &lt;p&gt;{{ shipping_address.city }}, {{ shipping_address.province }}  {{ shipping_address.zip }}&lt;/p&gt;
  &lt;p&gt;{{ shipping_address.country }}&lt;/p&gt;
  &lt;p&gt;{{ shipping_address.phone }}{% endif %}&lt;/p&gt;
  &lt;br&gt;
  
  {% if shopify_shipping_enabled %}
  &lt;p&gt;Save time and money by &lt;a href="{{ fulfillment_url }}"&gt;fulfilling with Shopify Shipping&lt;/a&gt;&lt;/p&gt;
  {% endif %}
  </code></pre>
  
  <p>Thanks in advance for any help!</p>