Search code examples
markdowngithub-flavored-markdown

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?

Solution

  • 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?