What's your biggest current challenge? Have your say in Community Polls along the right column.
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.

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 */