CODEWITHSUNDEEP
markdowngithub-flavored-markdown
CoryG
CoryG

Reputation: 2581

Full-width Markdown tables

So far I've gotten as far formatting and centering text in Markdown tables, but I have found nothing in terms of controlling the table dimensions relative to the outside container (at least other than the fact it will shrink automatically when it is too large by wrapping text.)

Is it possible to create a table in Markdown which stretches to the full width available? If so, how do you achieve this?

Upvotes: 24

Views: 43333

Answers (3)

npanuhin
npanuhin

Reputation: 51

For GitHub: you can insert empty images to fill the space:

<img width="441" height="1">

Source: https://gist.github.com/panoply/176101828af8393adc821e49578ac588

Upvotes: 5

Chris
Chris

Reputation: 136910

As Waylan says, Markdown cares about content, not presentation. His solution will work if you have control over where and how your content is rendered.

But in some instances, e.g. on GitHub, you don't have this control. As part of its Markdown rendering pipeline:

The HTML is sanitized, aggressively removing things that could harm you and your kin—such as script tags, inline-styles, and class or id attributes.

On GitHub you'll have to live with GitHub's rendering rules.

Upvotes: 12

Waylan
Waylan

Reputation: 42497

Define a CSS style for the table:

table {
    width:100%;
}

As the Markdown rules state:

Markdown’s syntax is intended for one purpose: to be used as a format for writing for the web.

Markdown is not a replacement for HTML, or even close to it. ... The idea for Markdown is to make it easy to read, write, and edit prose. HTML is a publishing format; Markdown is a writing format. Thus, Markdown’s formatting syntax only addresses issues that can be conveyed in plain text.

As Markdown is a "writing format," not a publishing format, it does not provide a means to "style" text. Of course, by default, Markdown generates HTML, so the appropriate question to ask is how to accomplish the styling you want in HTML. And the answer to that is to use CSS to set the width to 100% (see HTML table span entire width).

The next question is how to get the output to use that CSS definition. The answer to that depends on how and where the Markdown is being rendered. If you have full control, then you would likely included the CSS rule in your site's existing CSS rules. At least, you could include the rule in a <style> tag in the <head> for your document.

If you don't have control of the entire page then you could simply include a style tag somewhere in the Markdown itself. Markdown passes through HTML unmodified, so that wouldn't break anything. Like this:

<style>
    table {
        width: 100%;
    }
</style>

There is also the option of defining the style inline in a HTML <table> tag, but that only works if you manually craft your HTML. As you want Markdown to generate the HTML for you, then that's not a useful option.

Finally, if your Markdown is being rendered by a third-party site (like Stack Overflow or GitHub), that site may have various security measures in place which would make all of those options impossible. For example, see Is it possible to have a table in the center in a GitHub gist Markdown?

Upvotes: 25

Related Questions