PaperMod - increase width of specific page to display table

Using Themes
1

Hi I want to increase the width of one specific page, where there is a wide Markdown Table.
I think I need to add custom css to only this page. I do not have any experience in CSS or in PaperMod theme. And there are probably very many options to do this.

What is the best way in the HUGO and PaperMod way to include a css for only one page, so that the wide table fits the page?

I did find how to include css code for the whole site, I have no idea how to make it only applicable for one specific page. I am using Hugo and PaperMod on Gitlab (CI/CD - Pages)

Thanks for the help..

Related questions:

  1. Increase page width to display table - #2 by maiki (no awnser)
  2. [SOLVED] Custom CSS for each page - #2 by Mikhail (I would not like to change the theme)
  3. How can I change the default page width and canvas width (Hints to change .page-content attribute)
  4. Papermod Theme: How to add custom CSS? - #4 by alexandros (about adding custum.css to the whole site, I think)
2

You should probably ask the theme author — adityatelange/hugo-PaperMod · Discussions · GitHub.

1 Like
3

TLDR: You can easily accomplish this, but don’t.

The simplest way to do this without overriding the theme is to use a Markdown attribute to add inline styling. Yes, I know that inline styling isn’t ideal due to CSPs, but the HTML generated from the Markdown table already contains inline styling, so adding more isn’t going to hurt.

site config

[markup.goldmark.parser.attribute]
block = true

markdown

col a|col b
:--|:--
1|2
3|4
{style="overflow-x: visible;"}

But, just because you can do it doesn’t mean you should do it, because:

  1. The user experience will be awful on mobile devices
  2. A really wide table will require the user to horizontally scroll the entire window

Here’s an example of a really wide table. Try it yourself:

markdown 
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 | Column 6 | Column 7 | Column 8 | Column 9 | Column 10 | Column 11 | Column 12 | Column 13 | Column 14 | Column 15 | Column 16 | Column 17 | Column 18 | Column 19 | Column 20 |
| :------- | :------- | :------- | :------- | :------- | :------- | :------- | :------- | :------- | :-------- | :-------- | :-------- | :-------- | :-------- | :-------- | :-------- | :-------- | :-------- | :-------- | :-------- |
| Data A1  | Data B1  | Data C1  | Data D1  | Data E1  | Data F1  | Data G1  | Data H1  | Data I1  | Data J1   | Data K1   | Data L1   | Data M1   | Data N1   | Data O1   | Data P1   | Data Q1   | Data R1   | Data S1   | Data T1   |
| Data A2  | Data B2  | Data C2  | Data D2  | Data E2  | Data F2  | Data G2  | Data H2  | Data I2  | Data J2   | Data K2   | Data L2   | Data M2   | Data N2   | Data O2   | Data P2   | Data Q2   | Data R2   | Data S2   | Data T2   |
{style="overflow-x: visible;"}

2 Likes
4

Wauw. Thank you for your elaborate answer. I appreciate that.

My intention was to in the end create a table like you see on wikipedia, for example https://en.wikipedia.org/wiki/Comparison_of_reference_management_software for that I first need to populate a table. Your solution seems to help me forward to this goal.

I see your point on UX, and I will think about it. And do a bit of searching in the UX domain how to represent this amount of data to the user.

5

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.