Overflow a markdown table

Using HTML Class You can wrap your markdown table in a <div> with a specific class and then style that class in your CSS.

<div class="table-wrapper">
    
| Name     | Age | Location    |
|----------|-----|-------------|
| John     | 25  | New York    |
| Jane     | 28  | Los Angeles |
| Michael  | 30  | Chicago     |
    
</div>

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

Using Inline Style

Alternatively, you can add an inline style directly to the <div> to make the table scrollable.

<div  style="overflow-x: scroll;">
    
| Name     | Age | Location    |
|----------|-----|-------------|
| John     | 25  | New York    |
| Jane     | 28  | Los Angeles |
| Michael  | 30  | Chicago     |
    
</div>

Using a Jekyll Plugin

If you’re using Jekyll, you can create a plugin to automatically wrap tables with a scrollable container.

[:posts, :pages].each do |hook|
  Jekyll::Hooks.register hook, :post_render do |item|
    if item.output_ext == ".html"
      content = item.output
      # Wrap <table> tags with a div with style="overflow-x:auto;"
      content.gsub!(/<table(.*?)>/m, '<div style="overflow-x:auto;"><table\1>')
      content.gsub!(/<\/table>/m, '</table></div>')
      # Update the item content
      item.output = content
    end
  end
end

Using Only CSS for Table

You can also make the table scrollable using only CSS without modifying the HTML.

table {
    display: block;
    width: 100%;
    width: max-content;
    max-width: 100%;
    overflow: auto;
}

Related

1. Is there a way to overflow a markdown table using HTML?
2. Plugin > Wrap element with another element
3. Create (horizontally) scrollable tables using markdown syntax

By following any of these methods, you can ensure that your markdown tables remain readable responsive and neatly contained within your web page layout.