How to render multiple columns with Markdown in GitHub README?

Question

To render items in three columns, I attempted to add the following CSS3 directives to my project's README.md file, but the styling was stripped out:

<div style="-webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-rule: 1px dotted #e0e0e0; -moz-column-rule: 1px dotted #e0e0e0; column-rule: 1px dotted #e0e0e0;">
    <div style="display: inline-block;">
        <!-- first column's content -->
    </div>
    <div style="display: inline-block;">
        <!-- second column's content -->
    </div>
    <div style="display: inline-block;">
        <!-- third column's content -->
    </div>
</div>

This styling works correctly outside of GitHub's processing of Markdown. How can I put data into multiple columns in a Markdown document? Note that I am not concerned about support for IE browsers and don't care if IE renders a single column (my software project does not work on Windows clients, anyway).

Answer 1

GitHub-Flavored Markdown only permits certain allow-listed tags and attributes in inline HTML:

HTML

You can use a subset of HTML within your READMEs, issues, and pull requests.

A full list of our supported tags and attributes can be found in the README for github/markup.

Regarding <div> tags, that README says that only the itemscope and itemtype attributes are allow-listed, in addition to the general attribute allowlist:

abbr, accept, accept-charset, accesskey, action, align, alt, axis, border, cellpadding, cellspacing, char, charoff, charset, checked, cite, clear, cols, colspan, color, compact, coords, datetime, dir, disabled, enctype, for, frame, headers, height, hreflang, hspace, ismap, label, lang, longdesc, maxlength, media, method, multiple, name, nohref, noshade, nowrap, prompt, readonly, rel, rev, rows, rowspan, rules, scope, selected, shape, size, span, start, summary, tabindex, target, title, type, usemap, valign, value, vspace, width, itemprop

No tags support the style attribute.

Unless you can hack something together with the tags and attributes listed in that README I think you'll find that you're out of luck.

An alternative would be to put together a GitHub Pages site, which seems to be much more flexible.

Answer 2

if you don't mind the borders, you can use tables https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/organizing-information-with-tables