カスタム請求書テーブル

Question

Shopifyの「新規注文通知」メールを編集し、情報を整理するカスタムテーブルを作成しようとしています。

デスクトップ上ではこのように表示されますが、「行の価格」の列には合計が表示されます。モバイルで

、それは次のように合計が揃っていないと「合計」テーブルには100％の幅を持っていないに見えます。

私は明らかに私はちょうど&を試みるの疲れ、私は&を削除しようとしたモバイルクエリを、追加する必要が知っているここに私の問題をもたらしました。

デスクトップで両方のテーブルを100％作成するにはどのようなスタイルや編集を行う必要がありますか？&モバイルでは、トップテーブルの最後の列に合わせるにはどうすればよいですか？

は、ここに私の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; 
} 

そして、私の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> 
<a href="https://{{ shop.permanent_domain }}/admin/orders/{{ id }}">View order {{order_name}} </a> 
<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 <a href="{{ fulfillment_url }}">fulfilling with Shopify Shipping</a></p> 
{% endif %} 

ありがとう！

Answer 1

テーブルに高さが定義されていない場合、テーブルの高さが小さくなれば、テーブルの位置は停止します。

が、私はそこにやっているすべては、800ピクセルの最大値、および500pxなどの最小値に、100％幅広にテーブルを言っているあなたのCSS

table { 
    max-width: 800px; 
    min-width: 500px; 
    width: 100%; 
} 

にこれを追加します。 （として必要な調整）

これを追加したときに、あなたも携帯電話

.totals { 
    padding-right: 0 !important; 
} 

の合計を右padddingを削除したいと思うあなたも持っている.main-コンテナと呼ばれるスタイルを持っています最大幅80％...これを置き換える必要があります

.main-container { 
    width: 100%; 
}