Most blog and documentation themes constrain the content column to a readable width – 60 to 80 characters – which is good for prose but wastes screen space for wide tables. This brief shows how to selectively override that constraint on a single page without modifying the shared stylesheet.
The Problem
The site uses a stylesheet (simple.min.css) that includes this rule:
body > * { max-width: 70ch; margin-inline: auto; padding-inline: 16px; }This applies to every direct child of <body>: the <header>, <main>, and <footer> elements. Each is independently capped at 70 characters wide and centered in the viewport. For a blog post, this is ideal. For a wide reference table with ten columns, it means the table sits in a narrow corridor with large blank margins on both sides.
The Fix: Override in the Page’s Own <style> Block
Since the page already has 'unsafe-inline' in its Content Security Policy (see the previous brief on CSS tables), we can add an inline <style> block that overrides the shared stylesheet. Rules declared later in the document win when specificity is equal, and !important beats anything.
main, body > header, body > footer {
max-width: none !important;
margin-inline: 0 !important;
padding-inline: 2em;
}Three properties are set:
max-width: none removes the 70-character width cap entirely. The element now expands to the full width of its containing block, which is the viewport.
margin-inline: 0 removes the auto centering margins. Without this, the browser removes the max-width constraint but the auto margins still center the element – they just collapse to zero when the element is already full-width. Setting them explicitly to 0 makes the intent clear and avoids browser-specific behavior.
padding-inline: 2em adds breathing room between the content and the window edges. The shared stylesheet had padding-inline: 16px; we keep a similar value but in em units so it scales with font size.
Why All Three Elements
The initial fix only targeted main. That made the table fill the window, but the navbar and footer remained narrow and centered – visually disconnected from the table whose left edge now extended past them.
Including all three in the same rule (main, body > header, body > footer) locks them to the same left edge. The page looks coherent: breadcrumb, nav links, tables, and footer links all start at 2em from the left.
Making the Table Fill the Available Space
With main now full-width, the table still had a fixed width of 114em declared inline. On a wide monitor this left gaps; on a narrow one it caused unnecessary scrolling. The fix: use width: 100% so the table fills whatever its container provides, with min-width: 60em as a floor below which horizontal scrolling kicks in rather than the table collapsing.
<table style="table-layout: fixed; width: 100%; min-width: 60em;">With table-layout: fixed, the proportional widths declared on the <th> elements still govern how space is distributed across columns – a wider window just means each column gets proportionally more pixels.
Summary
| Rule | Purpose |
|---|---|
max-width: none !important |
Remove the narrow-column cap |
margin-inline: 0 !important |
Remove auto-centering margins |
padding-inline: 2em |
Keep content off the window edges |
| Apply to header + main + footer | Align all three to the same left edge |
width: 100%; min-width: 60em |
Table fills window; scrolls rather than collapsing |
Want to stay in touch?
- Join my Signal announce-only group to be notified when I have a new essay up and other important announcements.
- For discussion, join the libertygardeners Signal group.
- Subscribe to my mailing list.
- Email: [email protected]
- Signal: archerships.43
- Website: archerships.com
- Other social media: Substack | Twitter | Facebook | Nostr | Odysee
If you’d like to support my work:
- Share my posts.
- Become a subscriber to my newsletter.
- Attend my live events (dinner parties, conferences, pop-up cities, etc).
- Introduce me to like-minded people.
- Make a one-time donation to support my work: Crypto | Fiat
- Hire me for privacy / crypto / censorship consulting.
If there is a topic you’d like me to cover, please let me know!
Questions, comments, and suggestions are welcome.