Responsive table edge to edge in dawn theme

Store Design
1

Hi everyone, Hi @KetanKumar

I made a single separate page to include additional table information for my product, the reason for doing this is to make the table as meta field.

https://rexgenetics.myshopify.com/pages/sf-fibroveta-test

https://rexgenetics.myshopify.com/products/fibroveta-women-health

The current challenge is that the collapsable raw that has the Supplement Fact content has some problems fitting the current information for the table, I need the table to fit the field of supplement facts edge to edge without scroll; even if this will cut the spaces into new lines.

The target is similar to the following product in the Nutritional information

https://lumitylife.com/products/morning-night-supplements

Thanks

Password: dertug

2

@meo_me

can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
.rte table {width: 100 !important;}
.accordion__content table {display: table-footer-group;}
3

Thanks! much helpful:) I’m very happy.

4

@meo_me

its my pleasure to help us

5

Hi @KetanKumar

I’m noticing now there are many spaces in the text, however the page I designed and the tables are normal, what should I do?

The text in the table is organized and tight
The text in the table is organized and tight2736×1824 315 KB

many spaces between each lines,
many spaces between each lines,2736×1824 556 KB

6

@meo_me

yes, please send this product url

7

Password is ABCD

https://rexgenetics.myshopify.com/pages/thyrex-sf

https://rexgenetics.myshopify.com/products/thyrex-thyroid-health

8

@meo_me

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
.rte table td {line-height: normal;padding-top: 5px;padding-bottom: 5px;}
9

Hi KetanKumar,
I am also using the Dawn theme and have a problem displaying a table on mobile.
This is the link to the blog post:
https://dadcertified.store/blogs/news/instant-camera-recommendations
Are you able to offer advice as to how to make this responsive for mobile?
Thank you,
Jeremy

10

I managed to solve my problem using this table generator tool:
https://www.tablesgenerator.com/html_tables