Table with width 100% of the page

support
1

Hello,

I would like to do a table in markdown with a width of 100% of the page.

How to achieve this ?

Regards.

2

If you talk about markdown in Hugo:

The docs are not that bad: Requesting Help and this forum has a search function :wink:

Simple case

in your hugo.toml

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

Your Markdown content file table-example.md

| Syntax      | Description |
| ----------- | ----------- |
| Header      | Title       |
| Paragraph   | Text        |
{ width="100%" }

for more use cases you can

  • enable inline html
  • add classes
  • style with css
  • use a table-render-hook
3

It seems that it does not work …

Perhaps it’s due to the usage of this theme : Hextra.

4

maybe. Please read the given link. and follow.

show us what you have

5

Try this:

  1. Create a table and inspect it with your browser’s Dev tools.
  2. Look at the styles for the <table> you created.
  3. If you see display:block; uncheck it
  4. Is your table full-width (even if has only one column)?
1 Like
6

After uncheck display:block; the table is displayed with width 100%.

7

Your theme allows overriding styles, so try this first.

In your root folder, create the file:

/assets/css/custom.css

And add:

@media (min-width: 1024px) {
  table {
    display: table;
  }
}

This query will keep tables responsive on small screens and makes them full width on larger screens (prevent layout breaks).

Let us know if that works.

8

Sorry it does not work …

9

No worries, check the table again in Dev tools:

  1. Confirm that the custom.css file is actually being loaded and you can see the @media query you added?
  2. Is the display: table; rule struck through?

If both are true, then is a specificty issue and the quick and dirty solution is to target the exact same selector that overrides it.

For example, if the rule that sets display: block; is:

.prose table {
 /* Other rules*/
  display: block;
}

Then update your custom.css to match the selector:

@media (min-width: 1024px) {
  .prose table {
    display: table;
  }
}

Tell us which selector you find in Dev tools if you need help writing the exact override or share your website.

10

It is working with this piece of code:

.content :where(table):not(:where(.hextra-code-block table,[class~=not-prose],[class~=not-prose] *)) {
  display: table;
}
11

If you must use display: table on a table element to behave like a table, something in the theme is weird.