Reduce space between rows in a table (Dawn theme)

Store Design
, , , , , ,
1

hi,

I’m using Dawn theme & I would like to customize a table on my product description section:

  • I want to reduce the space between rows

  • I want to change the color of the lines to match the background (to get invisible table)

Thanks for your help

Alex

Screenshot 2023-09-05 at 19.36.12.png
Screenshot 2023-09-05 at 19.36.12.png2272×1038 206 KB

2

@Alex087 - can you please share this page link? it will need css

3

Hi @Alex087

Try this one,

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
table:not([class]) td, table:not([class]) th {
    border: none !important;

}
.product__description.rte.quick-add-hidden td {
    padding: 5px;
}
  • And Save.
  • You can adjust the size.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

4

Wahhoo wonderful Made4, is it also possible to remove the frame of the table?

Thanx

5

Hi @Alex087 ,

This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.

While I acknowledge that this issue falls short of the desired outcome, I have an idea that I believe might be of help:

  1. Go to Online Store → Theme → Edit code
  2. Open your theme.liquid file
  3. Paste below code before :

Beae_Anthony_0-1693937318962.png
Beae_Anthony_0-1693937318962.png654×497 30.9 KB

Best regards,

Anthony

6

Thanx Anthony this is working but the table appears during the loading of the page…

7

Yeah Try this one. Just add it to the file.

table:not([class]) {
    box-shadow: none !important;
}

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

8

Thanx Made$ this is working for the table appears shortly while the page is loading, is possible to delete this table instead of hiding it?

Thanx

9

Im not sure if this will work. But can try.

table:not([class]) td, table:not([class]) th {
    border-collapse: collapse !important; 
}
table:not([class]) {
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
}

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!