How can I adjust table style and width in Dawn theme?

Store Design
, , ,
1

Theme: Dawn

URL: https://medcanuniversity.com/pages/testresults

I need to make some adjustment to this table, and the tables i will be inserting in the future onto the same page.

I want the rows to be less separated, i.e. with less height, and the table to be wider, basically spanning across the whole page while still displaying correctly on mobile. I would also like the lines of the table to be a bit thicker.

I appreciate the help.

2

@medcanuni

This URL https://medcanuniversity.com/pages/testresults page was not found site show 404

3

Hi @medcanuni ,

We were unable to access the page through the URL you provided. Can you be more specific with your requirements with pictures so that we can easily visualize them?

4

Sorry it was recently changed. Here is the updated one: https://medcanuniversity.com/pages/analytics-database

5

Sorry it was recently changed. Here is the updated one: https://medcanuniversity.com/pages/analytics-database

I am having a hard time finding examples, but something more like this I guess.

table.PNG
table.PNG829×564 27 KB

6

Hi @medcanuni ,

To fulfill your request, please add the following code snippet to your base.css or theme.css:

.rte table {
  width: 100% !important;
  border-collapse: collapse !important;
  border: 2px solid #000 !important; /* Thick border */
}

.rte table th, td {
  padding: 10px !important;
}

@media (max-width: 600px) {
  /* CSS for mobile devices */
.rte table  {
    border-width: 1px !important; /* Thinner border */
  }
  
.rte table th, td  {
    padding: 5px !important;
  }
}

Good luck!

1 Like
7

Thank you, this worked!