Custom Invoice Table - html

Question

I'm trying to edit our Shopify 'New Order Notification' email and create a custom table to organize the information a bit better.
It should look like this on desktop, but I'd like to have the totals lined up with the 'line price' column.
On mobile, it looks like this the totals aren't aligned and the 'totals' table doesn't have a 100% width.
I know I obviously need to add mobile queries, which I tried & removed, I just got tired of trying & brought my issue here.
What styles or edits should I make to make both tables 100% on desktop & mobile, and how do I align the totals with the last column of the top table?
Here's my CSS:
/* 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;
}
And my HTML:
<p>Hello {{ shop_name }},</p>
<p>{% if customer.name %}<b>{{ customer.name }}</b>{% else %}Someone{% endif %} placed a new order with your store, {{ date | date: "%b %d %I:%M%p" }}:</p>
<div class="main-container">
<table class="table-1-items">
<tr class="table-1-headers" >
<td colspan="2" class="header-item left-justify" >Item</td>
<td class="header-sku left-justify">SKU</td>
<td class="header-item-price center-justify">Item Price</td>
<td class="header-qty center-justify">Qty</td>
<td class="header-line-price center-justify">Line Price</td>
</tr>
{% for line in line_items %}
<tr class="item-line">
<td class="item-image center-justify"><img src="{{ line | img_url: 'thumb' }}" alt="Item Image" /></td>
<td class="item-title left-justify">{{ line.title }}</td>
<td class="item-sku left-justify">{{ line.sku | lowcase }}</td>
<td class="item-price center-justify">{{ line.price | money }}</td>
<td class="item-qty center-justify">{{ line.quantity }}</td>
<td class="total-line-price center-justify">{{ line.line_price | money }}</td>
</tr>
{% endfor %}
<tr class="spacer"></tr>
</table>
<table class="table-2-totals">
<tr class="totals-row-1">
<td rowspan="7" class="order-instructions">ORDER NOTE/SPECIAL INSTRUCTIONS<br><span>{{ note }}</span></td>
<td class="totals-header subtotal-header">Subtotal:</td>
<td class="totals subtotal-input">{{ subtotal_price | money }}</td>
</tr>
<tr>
<td class="totals-header">Tax:</td>
<td class="totals">{{ total_tax | money }}</td>
</tr>
<tr>
<td class="totals-header">Rate:</td>
<td class="totals">{{ tax_line.rate }}</td>
</tr>
<tr>
<td class="totals-header">Discounts:</td>
<td class="totals">{{ discounts_amount | money }}</td>
</tr>
<tr>
<td class="totals-header">Shipping:</td>
<td class="totals">{{ shipping_price | money }}</td>
</tr>
<tr>
<td class="totals-header">Total:</td>
<td class="totals">{{ total_price | money }}</td>
</tr>
</table>
</div>
<br>
<br>
View order {{order_name}}
<br>
{% if fulfillment_aborted %}
<p>The above order was not automatically fulfilled because it was flagged as suspicious.</p>{% endif %}
<br>
{% if has_high_risks? %}<p><b>Security check:</b></p>
<p>This order has a risk of being fraudulent. Review the order in your store's admin and contact the customer to verify their information.</p>
{% endif %}
<br>
<p><b>Customer Email: </b>{{ email }}</p>
<p><b>Customer Company: </b>{{ billing_address.company }}</p>
<br>
<p><b>Payment processing method:</b></p>
<p>{{ gateway }}</p>
<br>
{% if requires_shipping and shipping_address %}
<p><b>Delivery method:</b></p>
{% for shipping_method in shipping_methods %}<p>{{ shipping_method.title }}</p>{% endfor %}
<br>
<p><b>Shipping address:</b></p>
<p>{{ shipping_address.name }}</p>
<p>{{ shipping_address.street }}</p>
<p>{{ shipping_address.city }}, {{ shipping_address.province }} {{ shipping_address.zip }}</p>
<p>{{ shipping_address.country }}</p>
<p>{{ shipping_address.phone }}{% endif %}</p>
<br>
{% if shopify_shipping_enabled %}
<p>Save time and money by fulfilling with Shopify Shipping</p>
{% endif %}
Thanks in advance for any help!

Answer 1

So if tables have no defined height they will keep getting smaller until they can no longer get any smaller, then they stop where they are.
Add this to your CSS
table {
max-width: 800px;
min-width: 500px;
width: 100%;
}
All I'm doing there is telling the tables to be 100% wide, to a maximum of 800px, and a minimum of 500px. (adjust as required)
When you've added this you'll also want to remove the right paddding on the totals for MOBILES
.totals {
padding-right: 0 !important;
}
You also have a style called .main-container which has a max width of 80%... you need to replace that with
.main-container {
width: 100%;
}