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

[medcanuni]

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.

[dmwwebartisan]

@medcanuni 

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

[medcanuni]

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

[BSS-Commerce]

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?

[medcanuni]

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. 

[BSS-Commerce · Accepted solution]

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!

[medcanuni]

Thank you, this worked!