Happening now! Shopify Community AMA: PayPal Express Migration to Shopify Payments | Ask your questions to be answered by our team.
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Re: Remove Page Table Borders Dawn Theme

Remove Page Table Borders Dawn Theme

jimmybkc
Visitor
3 0 2

Hi all,

 

I wondered if I could have some assistance please? I am currently adding a table on one of my store pages (Dawn Theme).  I am doing this using the pre-loaded table function located in the pages section. At present the faint grey table borders are visible and I would like to remove these entirely. 

 

Does anybody know how I can remove table borders please? I have very little design experience so simple instructions would  be greatly appreciated.

 

Thanks

Jim

Replies 9 (9)

RJ54
Tourist
3 0 1

I would like to know as well!

reefeco
Visitor
1 0 0

Looking for this solution as well... 

 

AntheaM
Tourist
5 0 4

Very keen to know too! 

Have been playing around with this for a while and cannot figure it out. 
Cheers

BakerK
Visitor
1 0 7

Table borders can be switched off within the base.css file

Theme > Edit Code > Assets > base.css.

Around line 530, you'll find default table settings - 'table:not([class])'. There's a border and box-shadow value of 0.1rem. If you find these and set them to 0 leaving everything else as it is, this will remove the visible borders whilst retaining all other table formatting.

*@Jimmybkc / anyone else newer to dipping into the code, always worth copying and pasting the code as you first find it into a desktop notes doc before making any edits so you've always got an untouched backup if you need to roll back to original settings

AntheaM
Tourist
5 0 4

Ah amazing, thanks so much for that. 
I changed the 530 line to 0 and that took out the inside borders of the table. There was another setting on line 524 for the 'box shadow' that I changed to 0rem and that fixed it. 

 

Really appreciate your help with that. Has been annoying me for so long. 

culturedandi
Tourist
4 0 1

This solution worked for me as well—Craft Theme. Thank you so much!! 🙂

INDISHAJeanine
Shopify Partner
4 0 0

Hi, in my Assets there is no base.css Do you knowhow to remover table lines in this case? IMG_9663.JPG

JayEncinares
Visitor
1 0 0

Thank you so much for this! just wondering if there is a way to only apply this changes to specific page?  

NuGenLED
Visitor
2 0 0

2024 Update... to remove the border in the tables on the DAWN theme, it should look like this:

 

Theme > Edit Code > Assets > base.css

Starting at Line 420 (see what I put in bold print, that is the change needing to happen)

 

table:not([class]) {
table-layout: fixed;
border-collapse: collapse;
font-size: 1.4rem;
border-style: hidden;
box-shadow: 0 0 0 0rem rgba(var(--color-foreground), 0.2);
/* draws the table border */