Custom inline css for HTML table border inside metafield

Store Design
, , ,

Topic summary

  • Issue: A Shopify merchant added an HTML table inside a product metafield (multi-line text) rendered via custom Liquid in a collapsible row and needs to remove vertical borders, keeping only horizontal separators between rows.

  • Current markup: Table uses inline styles with border-collapse: collapse and border-bottom: 1px solid on each . Cells () include widths and text alignment. Goal is to show only row dividers (horizontal lines), no vertical lines or outer border.

  • Attempted solution: User tested CSS (unspecified in the post) on W3Schools where it removed vertical lines, but the same approach did not work on their live Shopify storefront.

  • Evidence: Multiple screenshots were provided (Shopify editor and live site) showing persistent vertical lines; these images are central to understanding the visual issue.

  • Latest update and status: A responder asked for the store URL to inspect and assist. No fix has been provided yet; the thread remains open pending the merchant sharing their URL.

Summarized with AI on December 21. AI used: gpt-5.
1

Hi there,

New to shopify and css, I’ve managed to add a table inside a metafield (multi-line text) and using a custom liquid to display in a collapsible row.

But I am struggling to remove the borders. See screenshot below.

I tried the below code and inside the w3chools sample code tester and it seems to remove the vertical lines.

This is what i have in my metafield

<table width="100%" style="border-collapse: collapse; width: 100%;" height="51">
<tbody>
<tr style="height: 19.6px; border-bottom: 1px solid">
<td style="width: 33.1762%; height: 19.6px;">Serving Size</td>
<td style="width: 66.3525%; height: 19.6px;text-align: right; ">100g</td>
</tr>
<tr style="height: 19.6px; border-bottom: 1px solid">
<td style="text-align: right"; colspan="2">Average Quantity Per Serving</td>
</tr>
<tr style="height: 19.6px; border-bottom: 1px solid">
<td style="width: 33.1762%; height: 19.6px;">Calories</td>
<td style="width: 66.3525%; height: 19.6px; text-align: right">544 Kcal</td>
</tr>
</tbody>
</table>

What I would like to do is something like this:

Only have horizontal lines to separate each row. Any help would be much appreciated .

au_hn_3-1724316612521.png
au_hn_3-1724316612521.png1894×521 47.7 KB

In shopify:

au_hn_0-1724316348027.png
au_hn_0-1724316348027.png355×188 3.43 KB

On my website: Goal is to remove the vertical lines and border. Only have horizontal line to separate the rows

au_hn_1-1724316392861.png
au_hn_1-1724316392861.png647×282 5.54 KB

Thanks

2

Hi @au_hn Please share your URL? I will check and help you.