Wide tables become squished in published pages

Product Support

AI-generated summary

Wide tables become squished in published pages

rachel-statsnz is experiencing issues with wide tables appearing squished on published pages. She has tried using CSS to improve the table’s appearance but believes that published pages do not show theme components. nathank suggests that CSS should still work on published pages and that the issue may be related to specific classes used in the published page’s CSS. Steven identifies two issues with the published page: the content wrapper’s size and the table’s width. He provides custom CSS code to adjust the content wrapper’s max-width and the table’s width. Although rachel-statsnz finds the code helpful, the table still appears somewhat squished, and she seeks further assistance.

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).

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%;
  }
}
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