Wide tables become squished in published pages

Support
1

Hi folks,

I have been trying to improve the look on my published pages, as it appears that wide tables get very squished.

The image displays a table with the total number of driver licence holders aged 16 plus on a class 1 licence by stage from 2012 to 2021. The table contains columns for full learner data, open match/id data, open match/id data, and open match/id data, along with percentages for each. (Captioned by AI)
The image displays a table with the total number of driver licence holders aged 16 plus on a class 1 licence by stage from 2012 to 2021. The table contains columns for full learner data, open match/id data, open match/id data, and open match/id data, along with percentages for each. (Captioned by AI)1274×1258 75.3 KB

edit: here is the page link

I tried to use CSS to create table borders and to maximise table widths
but I think the published page does not show theme components :smiling_face_with_tear:

Any ideas how I can make wide tables look better?

edit 2: does page published views get stored?

2

CSS should still work on published pages - is it just JavaScript and the like which doesn’t.

It does have specific classes though (of course).

2 Likes
3

There are two issues with this published page and the table.

The content-wrapper seems a bit small.

You could try to adjust it by playing with max-width (first part of the css), you can change the value it should still be responsive.

Then the width:100% of the table doesn’t work, probably because the css is a little bit different in the published page. I’ve added a second part in the custom css to fix that

Here is the code:

.published-page {
  .published-page-content-wrapper {
    max-width: 1200px;
    width: 100%;
  }
  .md-table .table {
    width: 100%;
  }
}
3 Likes
4

Wow thanks! The code does make the page a look a lot better! But the table still seems somewhat squished? Any other thoughts?

image
image2807×1076 261 KB

This is what it looks like on the platform:

image
image1455×1465 197 KB