Adding a Horizontal Scroll to Overflowing Markdown Table in HTML

Overflowing table

If you have a wide table, it might overflow your normal post width and look really ugly. It is the case for a lot of data science projects as there are many features in columns to analyze! For example, a table like this:

	col_name1	col_name2	col_name3	col_name4	col_name5	col_name6	col_name7	col_name8	col_name9	col_name10
row1
row2

Fortunately, I found a way to make such table fit nicely to my Jekyll page layout like this. (Is there a way to overflow a markdown table using HTML?)

	col_name1	col_name2	col_name3	col_name4	col_name5	col_name6	col_name7	col_name8	col_name9	col_name10
row1
row2

How to add a horizontal scroll

First, add the following wrapper rule to the css file.

.table-wrapper {
  overflow-x: scroll;
}

And then add this to before and after your table. Make sure you have a blank line between your table and the end </div> to see it in effect.

<div class="table-wrapper" markdown="block">

</div>

Applying this to the above example:

<div class="table-wrapper" markdown="block">

|      | col_name1 | col_name2 | col_name3 | col_name4 | col_name5 | col_name6 | col_name7 | col_name8 | col_name9 | col_name0 |
|------|-----------|-----------|-----------|-----------|-----------|-----------|-----------|-----------|-----------|-----------|
| row1 |           |           |           |           |           |           |           |           |           |           |
| row2 |           |           |           |           |           |           |           |           |           |           |

</div>