ワイドテーブルが公開ページで圧縮される

サポート
1

皆さん、こんにちは。

公開されたページの見栄えを良くしようとしていますが、横長のテーブルが非常に圧縮されて表示されるようです。

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

編集：こちらがページリンクです。

CSSを使ってテーブルの罫線を作成したり、テーブルの幅を最大化しようとしましたが、公開ページにはテーマコンポーネントが表示されないようです :smiling_face_with_tear:

横長のテーブルを見栄え良くする方法について、何かアイデアはありますか？

編集2：公開されたページの表示は保存されますか？

2

CSS は公開されたページでも引き続き機能するはずです。JavaScript などが機能しないだけです。

ただし、特定のクラスがあります（もちろん）。

「いいね！」 2
3

公開されたページとテーブルに2つの問題があります。

content-wrapper が少し小さいようです。

max-width（CSSの最初の部分）を調整することで、これを修正できます。値を変更しても、レスポンシブに対応します。

次に、テーブルの width:100% が機能していません。これは、公開されたページでは CSS が少し異なるためだと思われます。これを修正するために、カスタム CSS に2番目の部分を追加しました。

コードは次のとおりです。

.published-page {
  .published-page-content-wrapper {
    max-width: 1200px;
    width: 100%;
  }
  .md-table .table {
    width: 100%;
  }
}
「いいね！」 3
4

ありがとうございます！コードでページがずっと見やすくなりました！でも、テーブルはまだ少し窮屈に見えるのですが？他に何か考えはありますか？

image
image2807×1076 261 KB

プラットフォームではこのように表示されます：

image
image1455×1465 197 KB