Debut theme automatically adding a border between my <td> of my HTML Table

Technical Q&A
1

Hello, below is my code. Shopify automatically is adding a border between each of the . I only want a border around the outside. Why would this be happening? Code below and end result after metafields are pulled is in the screenshot below. I also wanted the table to be rounded but border-radius styling doesn’t do anything. Any ideas why?


| {{product.metafields.disc.speed}} | {{product.metafields.disc.glide}} | {{product.metafields.disc.turn}} | {{product.metafields.disc.fade}} |
| - | - | - | - |
2

Hi @hankblip

Would you mind to share your Store URL website? with password if its unpublish. Thanks!

3

sent a DM with a preview link on a message to you

4

Hi @hankblip

If you know where to find the code its this one causing the border on the center.

Made4uoRibe_0-1700084488734.png

Made4uoRibe_1-1700084530104.png
Made4uoRibe_1-1700084530104.png525×199 8.49 KB

Or used this code.

  • 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:
center th, td {
    border: none !important;
}

  • Made4uoRibe_3-1700086066085.png

  • And when you like to add some border-radius. This code.

table {
    border-collapse: unset;
    border-spacing: 0px;
}
table {
    border-bottom-right-radius: 5px;
}
th, td {
    border: none;
}

  • But there will be some products that dont have a border.

  • Made4uoRibe_2-1700085981213.png

  • And Save.

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

5

Thank you! Why do some products not have the border? Is there a way to edit the table settings just for this one set of tables? Create a class for them or something.

6

It may have different templete. Also in your collection pages its not showing all the tables that you made.

7

Yes, not every product has those metafields so they do not show when they do not exist in the product. There must be a way to do it that the styling of these tables only applies to these ones where I put the code?

8

Yes, Im sorry just trying to help you. But the solution I can think is to get a developer. And explain more the design you like as I can see you have a lot of products. Anyway, let us know if your interested anyway. You can get a qoute first and decide. Thanks!