Responsive Table in Markdown

Question

How to make a markdown table responsive? I'm using Jekyll which renders markdown files.

Here's a table example

| Tables   |      Are      | Tables   |      Are      | Tables 
|----------|:-------------:|----------|:-------------:|-------------:|
|  <img src="https://www.google.com.pk/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwjZl8ji8r_dAhUIsqQKHSA1Cz0QjRx6BAgBEAU&url=https%3A%2F%2F" width="100" /> | hello | hello |hello | hello

I'm displaying 5 <img> tags in <tr>. It renders perfectly on a large screen but is not responsive on small screens or mobile.

I'm using Jekyll static-site generator which uses markdown files.

Answer 1

You need to write CSS for that. Jekyll just converts your markdown file (using kramdown) to simple HTML, then it's a CSS which makes HTML table responsive. Here is a good start article about responsive tables: https://css-tricks.com/accessible-simple-responsive-tables/