Error in HTML table in Dawn theme

[a-maise]

Tried to add a table in HTML under description, but it turns out weird. The borders are showing when they were not supposed to, and the alignment is haywire. Am attaching the screenshots of - (i) How it should look like as can be seen from a HTML reader (ii) how it actually turned out.

I would like to align the text so have used the table.

I am using Dawn theme.

Please assist.

[BSSCommerce-TC]

Hi @a-maise 

Because it is applied with the theme's available selectors. If you want to design like (1), you need to adjust the specific to apply to the table you want.

If you don't mind, could you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

[a-maise]

Hello, the store has not been launched and everything is still in draft so you won’t get to see much except for the screenshot above. 

would it help if I paste the html here?

<table><tbody> <tr> <td> Material: </td> <td style="padding-left: 100px;"> Wood </td> </tr> <tr> <td> Wooden material: </td> <td style="padding-left: 100px;"> Pine </td> </tr> <tr> <td> Style: </td> <td style="padding-left: 100px;"> Nordic </td> </tr> <tr> <td> Shape: </td> <td style="padding-left: 100px;"> Round </td> </tr> <tr> <td> Popular elements: </td> <td style="padding-left: 100px;"> Logs, master design </td> </tr> <tr> <td> Finishing material: </td> <td style="padding-left: 100px;"> Wood</td> </tr> <tr> <td> Structural Craft: </td> <td style="padding-left: 100px;"> Wooden Craft</td> </tr> <tr> <td> Whether Customizable: </td> <td style="padding-left: 100px;"> Yes</td> </tr> <tr> <td> Whether With Rollers: </td> <td style="padding-left: 100px;"> No</td> </tr> <tr> <td> Number of Doors: </td> <td style="padding-left: 100px;"> No</td> </tr> <tr> <td> Whether With Storage Space: </td> <td style="padding-left: 100px;"> No</td> </tr> <tr> <td> Whether to Assemble: </td> <td style="padding-left: 100px;"> Yes</td> </tr> <tr> <td> Shape of Coffee Table Corner: </td> <td style="padding-left: 100px;"> Round</td> </tr> <tr> <td> Style Positioning: </td> <td style="padding-left: 100px;"> Artistic Style</td> </tr> </tbody></table>

Thanks.

[BSSCommerce-TC]

Hi @a-maise ,

I was paste your code in my theme ( i'm also using Dawn theme ) . I sure that your selector has affected the table.

[a-maise]

Hello

what do you mean by “selector”? How do I rectify the issue?

also, I didn’t want the border lines to show. 

thanks 

[BSSCommerce-TC]

Hi @a-maise , 

Below is the code I used; you can refer to it.

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

table:not([class]) td,
table:not([class]) th {
  padding: 1em;
  border: 0.1rem solid rgba(var(--color-foreground), 0.2);
}

.rte table {
  table-layout: fixed;
}

@media screen and (min-width: 750px) {
  .rte table td {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
}

Try to insert at the end of base.css file

I hope it will helpful with you. If it works well, can you kindly give us a like and mark it as a solution?

[a-maise]

Hello

It didn't work for me though...

[a-maise]

is there a code i can add to theme.liquid instead? I have added your code to base.css but it didnt work.  I also wish to remove the border lines

[BSSCommerce-TC]

Hi @a-maise ,

Can you kindly download file base.css and share your file zip with us? We will help you check it on my site.