Create (horizontally) scrollable tables using markdown syntax

Help
1

In order to have responsive tables, I want to be able to display an horizontal scrollbar in the table when the window/screen size becomes small.

I want to have a table with width: 100% and it’s contents stretched to fill the full width (so I can’t have a display: block on the table). But I also want an overflow: auto on the table, so if the screen is too narrow, the table scrolls horizontally.

To the best of my knowledge this cannot be done by pure CSS so I need to wrap the inside a

element to make that work.

From the discussion in Wrap Kramdown tables in a div · Issue #69 · gettalong/kramdown · GitHub it seems that I need to customize the kramdown HTML converter but I am not sure what’s the best way to do it via Jekyll. Any thoughts?

2

Table structure and Kramdown

Okay you want to make a table using Markdown rather than HTML?

It doesn’t matter here. Make a Markdown table and then target with table in CSS. at the risk of affecting all tables.

| A | B | C |
--- | --- | ---
| some | table | here |

table {
 ...
}

If you want to narrow it down though, you could add a wrapper around your Markdown table to give it a div and an ID or class. See below.

No extra Kramdown configuration needed. That is what the linked issue says and that is my experience too, putting any element like Markdown image for example inside HTML as long as there is whitespace and you don’t indent.

<div class="overflow-table">

| A | B | C |
--- | --- | ---
| some | table | here |

</div>

.overflow-table {
 ...
}

Or you can just make a plain HTML table.

3

CSS solution

I implemented this before, for scrolling table on mobile.

@media (max-width: 1000px)  {
  table {
    overflow-x: auto;
    width: 100%;
  }
}
4

Oops you didn’t check your question formatting. Your element got lost

Remember to add codeblock

With backticks

```
<div></div>
```

Result

<div></div>
5

Thanks for taking the time to help @MichaelCurrin

If you don’t have a wrapper div it cannot be done with pure CSS associated to the table as demonstrated also by the fiddle: Edit fiddle - JSFiddle - Code Playground

I want to add a div wrapper around the table but I want this to be done for all markdown tables transparently without having to modify each and every one manually. That is why I mentioned extending the HTML converter. Apologies if it was not clear from the beginning.