I have written a short blog post about my approach to responsive tables on CodePen.

The long and short of it - when the table is wide enough to be displayed normally I display it like a normal table, but when the table will not have enough room to show up I use CSS to totally re-style the layout. I treat each <tr> kind of like its own mini-table. There are a few examples at the bottom of the post :D

Of course, usually when you're building responsive tables you wish the breakpoints were relative to the width of the <table> element itself, instead of being based on the viewport. This responsive table has element-based breakpoints so you can add it to any layout (with or without a sidebar) and it is always going to show up looking its best:

I personally feel HTML tables are very restrictive. There's very limited scope of what you can achieve there, it of course depends on the use-case though.

If you're doing it the flexbox way, then this article is really helpful:

Since flex box is so badly supported in Internet explorer I wouldn't recommend you to use it for your layout