Question

我正在尝试编辑Shopify“新订单通知”电子邮件并创建自定义表格以更好地整理信息。

它应该在桌面上看起来像这样，但我希望总计与“线价”列对齐。

在移动设备上，看起来总计未对齐且“总计”表的宽度不是100％。

我知道我显然需要添加移动查询，我试过这个问题。删除，我只是厌倦了尝试＆amp;把我的问题带到了这里。

我应该制作哪些样式或编辑才能使这两个表在桌面和桌面上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

因此，如果表格没有定义的高度，它们会一直变小，直到它们不再变小，然后它们停在原来的位置。

将此添加到您的CSS

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

我所做的就是告诉表格100％宽，最大800px，最小500px。（根据需要调整）

当你添加了这个时，你还想要删除MOBILES总计上的右侧paddding

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

您还有一个名为.main-container的样式，其最大宽度为80％...您需要将其替换为

.main-container {
  width: 100%;
}

自定义发票表

1 个答案: