Tables are not responsive

Latest version of Grav on antimatter:

I just inserted a 22 column x 5 row table into a default page and it looks great on a 1920px wide monitor. However, the table does not collapse when I pinch the window to a smaller size -- colums are simply cut off and you can't scroll to view them.

Is there a fix for this? I used the following markup for the table:

| Col 01 | Col 02 | Col 03 | ---> to 22 columns
| :----- | :----- | :----- | ---> etc.

Screenshots at 1920px and 1080px (monitor set to portrait mode): 1920 1080

I don't know if Antimatter has something like this imlpemented, if not you need to add some styles to achieve this behaviour.
I think you could go with something like this http://codepen.io/Ryuno-Ki/pen/xGEPjo

It would be nice if the markdown actually created divs using display:table, display:table-cell instead of actual table html code. Not sure if that is something the developers have any control over and there may still be instances where tabular data would be better in a table.

As chidvanid pointed out, there are examples for responsive tables using straight css. There are also open source scripts like tablesaw you can use in the site but usually they require adding classes to your table.

In some instances I have read of people designing the table for mobile and then writing css to make it look right on desktop. Never tried it myself and with a media query and some css you can usually make a table look ok in responsive layouts.

I still prefer using divs when possilbe. You can always create the table and copy the source into a tool like http://divtable.com/converter/ and convert it to dvis. Than create a simple media query to make it responsive.

Could make a nice set of shortcodes :)