March 14, 2016 @ 20:59
Responsive tables generator - No More Tables - a jQuery solution
Tables! Argh it's a nightmare making a table that looks good on phone and PC.
Thankfully, there're some clever people out there who're thinking about this stuff. One of them is Chris Coyier, who describes a solution on his blog, CSS Tricks.
A picture on that blog sums it up nicely.
So, I made a table generator that creates these tables for you
This CSS hack is not perfect, as Coyier says on his blog.
But it's pretty good. It doesn't use JavaScript, which is great.
So I made a website that generates tables. You can use it online here.
You can otherwise download it from my Github repo.
How it works
I recommend you download the Github repo, as this table has SBS styles (my employer).
Really simple. Copy and paste some data from a spreadsheet, or a html-based table into the main text area. Make sure you get rid of any blank spaces at the end.
Set a breakpoint. This is the point when the table collapses and becomes a responsive table.
When you do so, it changes.
To this
That's it.
You can see the dynamic live table here
I can't really take any credit for this, other than some jQuery. I think CSS Tricks (where this trick came from) is an excellent blog, too.