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 .
In shopify:
On my website: Goal is to remove the vertical lines and border. Only have horizontal line to separate the rows
Thanks