Responsive tables

Make wide Markdown tables easier to read on smaller screens by wrapping them in a responsive container. The table keeps its structure, while visitors can scroll horizontally when the content is wider than the available space.

By default, tables follow the width of the content area. For wider tables, wrap the table in <div class="responsive-table"> to add horizontal scrolling when needed.

Step-by-Step

Add a Markdown card to the post or page where you want to place the table.
Wrap the table in <div class="responsive-table">. In Markdown, keep a blank line between HTML and Markdown content so Ghost can parse the table correctly.

<div class="responsive-table">

| # | Heading | Heading | Heading | Heading | Heading |
|:--|:--------|:--------|:--------|:--------|:--------|
| 1 | Cell    | Cell    | Cell    | Cell    | Cell    |
| 2 | Cell    | Cell    | Cell    | Cell    | Cell    |
| 3 | Cell    | Cell    | Cell    | Cell    | Cell    |

</div>

Markdown table syntax is simple but limited: it does not support merged cells or multi-line cell content. The first row is the header, followed by a separator row with dashes and optional colons for column alignment.

Tip: How to generate a table

You can generate Markdown table syntax with Markdown Tables Generator ↗.