Hi everyone,
I would greatly appreciate some guidance on how to align column headers.
As you can see from the code snippet below, I do not want the SKU column to appear in a customer order.
After hiding it, the remaining column headers no longer show aligned to their respective information (see the attached screenshot).
The ‘product’ header should be left aligned, as it was before I commented out the SKU column.
How can I rectify this issue? Thanks in advance!!
<tbody role="rowgroup">
{%- for line_item in order.line_items -%}
<tr role="row">
<td
id="Row{{ line_item.key }}"
headers="ColumnProduct"
role="rowheader"
scope="row"
data-label="{{ 'customer.order.product' | t }}"
>
<div>
{%- if line_item.url != blank -%}
<a href="{{ line_item.url }}">{{ line_item.title }}</a>
{%- else -%}
<p>{{ line_item.title }}</p>
{%- endif -%}
{%- assign property_size = line_item.properties | size -%}
{%- unless line_item.selling_plan_allocation == null and property_size == 0 -%}
<div class="properties">
{%- unless line_item.product.has_only_default_variant -%}
<span>
{{ line_item.variant.title }}
</span>
{%- endunless -%}
{%- unless line_item.selling_plan_allocation == null -%}
<span>
{{ line_item.selling_plan_allocation.selling_plan.name }}
</span>
{%- endunless -%}
{%- if property_size != 0 -%}
{%- for property in line_item.properties -%}
{% assign property_first_char = property.first | slice: 0 %}
{%- if property.last != blank and property_first_char != '_' -%}
<span>{{ property.first }}:</span>
<span>
{%- if property.last contains '/uploads/' -%}
<a href="{{ property.last }}">{{ property.last | split: '/' | last }}</a>
{%- else -%}
{{ property.last }}
{%- endif -%}
</span>
{%- endif -%}
{%- endfor -%}
{%- endif -%}
</div>
{%- endunless -%}
{%- if line_item.line_level_discount_allocations != blank -%}
<ul role="list" aria-label="{{ 'customer.order.discount' | t }}">
{%- for discount_allocation in line_item.line_level_discount_allocations -%}
<li>
<svg aria-hidden="true" focusable="false" viewBox="0 0 12 12">
<use href="#icon-discount" />
</svg>
{{- discount_allocation.discount_application.title }} (-
{{- discount_allocation.amount | money -}}
)
</li>
{%- endfor -%}
</ul>
{%- endif -%}
{%- if line_item.fulfillment -%}
<div class="fulfillment">
{%- assign created_at = line_item.fulfillment.created_at | time_tag: format: 'date' -%}
<span>{{ 'customer.order.fulfilled_at_html' | t: date: created_at }}</span>
{%- if line_item.fulfillment.tracking_url -%}
<a href="{{ line_item.fulfillment.tracking_url }}">
{{ 'customer.order.track_shipment' | t }}
</a>
{%- endif -%}
<span>
{{ line_item.fulfillment.tracking_company }}
{%- if line_item.fulfillment.tracking_number -%}
#{{ line_item.fulfillment.tracking_number }}
{%- endif -%}
</span>
</div>
{%- endif -%}
</div>
</td>
<!-- <td
headers="Row{{ line_item.key }} ColumnSku"
role="cell"
data-label="{{ 'customer.order.sku' | t }}"
>
{{ line_item.sku }}
</td> -->
