markdown-it-scrolltable

A markdown-it plugin to wrap any <table> into a <div> for horizontal scrolling on narrow screens.

Examples #

A markdown table
Column | Column
------ | ------
Cell | Cell

will become

A html <table> wrapped into <div>
<div class="scroll-table" style="overflow-x:auto">
<table>
<thead>
<tr>
<th>Column</th>
<th>Column</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
</div>

html inside of your markdown, like for example

A html table inside of markdown text
<table>
<thead>
<tr>
<th>Column</th>
<th>Column</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>

will be transformed into

A html <table> wrapped into <div>
<div class="scroll-table" style="overflow-x:auto">
<table>
<thead>
<tr>
<th>Column</th>
<th>Column</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
</div>

Usage #

JavaScript
var markdownIt = require('markdown-it');
var markdownItScrollTable = require('markdown-it-scrolltable');

markdownIt({
html: true,
linkify: true,
typographer: true,
})
.use(markdownItScrollTable);