Shopify themes, liquid, logos, and UX
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
Hi all, I'm trying to recreate a table but I can't get it quite right. I want to recreate the one with the one with the center rounded column, but the closest I can get is below. I can't get the border around the entire table to disappear, and I also can't get the center column to round off. I know I'm missing something simple. Any advice would be very helpful -- thank you!
<!-- Benefits and Membership Details Table -->
<table id="benefits-table" style="width: 100%; font-size: 12px; border-collapse: collapse;">
<tr>
<th style="text-align: left; padding: 5px;">BENEFITS</th>
<th style="text-align: center; padding: 5px; border: 2px solid #363636; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom: none;">MEMBERS</th>
<th style="text-align: center; padding: 5px;">NON-MEMBERS</th>
</tr>
<tr>
<td style="padding: 5px;">15% Off</td>
<td style="padding: 5px; text-align: center; border-left: 2px solid #363636; border-right: 2px solid #363636;"> <span id="discounted-subtotal"></span></td>
<td style="padding: 5px; text-align: center;"><span id="non-discounted-price"></span></td>
</tr>
<tr>
<td style="padding: 5px;">Shipping</td>
<td style="padding: 5px; text-align: center; border-left: 2px solid #363636; border-right: 2px solid #363636;">FREE</td>
<td style="padding: 5px; text-align: center;">TBD</td>
</tr>
<tr>
<td style="padding: 5px;">Exclusive Access</td>
<td style="padding: 5px; text-align: center; border-left: 2px solid #363636; border-right: 2px solid #363636;">✔</td>
<td style="padding: 5px; text-align: center;">✘</td>
</tr>
<tr>
<td style="padding: 5px;">Cancel anytime</td>
<td style="padding: 5px; text-align: center; border-left: 2px solid #363636; border-right: 2px solid #363636; border-bottom: 2px solid #363636; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;">✔</td>
<td style="padding: 5px; text-align: center;">✘</td>
</tr>
</table>
Please, share the store URL with this table. Thanks!
Hello @Made4uo-Ribe,! The table can be found in this preview on the cart page: https://pulr0obbm2gz04xx-10258957.shopifypreview.com
Thanks!
Thanks for the info, but where can i find the table?
@Made4uo-Ribe Thanks for the reply! It can be seen on the site here: https://pulr0obbm2gz04xx-10258957.shopifypreview.com/cart