Re: Having trouble making an HTML table

Having trouble making an HTML table

BentonsBacon
Excursionist
29 0 3

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!

Your-Shopping-Cart-02-25-2025_09_45_AM.pngBest-High-Quality-Soft-Slim-Fitted-T-Shirts-for-Men-True-Classic-02-25-2025_09_31_AM.png

<!-- 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>

 

Replies 4 (4)

Made4uo-Ribe
Shopify Partner
10211 2427 3081

Hi @BentonsBacon 

Please, share the store URL with this table. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
BentonsBacon
Excursionist
29 0 3

Hello @Made4uo-Ribe,! The table can be found in this preview on the cart page: https://pulr0obbm2gz04xx-10258957.shopifypreview.com

Thanks!

Made4uo-Ribe
Shopify Partner
10211 2427 3081

Thanks for the info, but where can i find the table? 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
BentonsBacon
Excursionist
29 0 3

@Made4uo-Ribe Thanks for the reply! It can be seen on the site here: https://pulr0obbm2gz04xx-10258957.shopifypreview.com/cart