Anyone managed to add responsive tables to WriteFreely posts?
I use Markdown to add tables, but on phones and narrow screens they are not responsive - would be great if they would like this example when table transposes nicely. Although there are some blockers:
- transposed rows (
<td> elements) use data-label attribute which is not present in Marked-down table;
-
JavaScript could be added to dynamically assign
data-label attribute, but it needs table id, so if multiple tables exist on post, need to run this JavaScript for each table individually.
Any ideas how to approach responsive tables problem? Ideally that would be done with pure CSS, but JavaScript might work ok too. Would be the best to avoid modifying backend which renders table itself (somewhere I’ve read that dynamically asigning data-label might not be good behaviour - probably in terms of SEO as well).
How does adding the CSS from the first example to your blog’s custom CSS work for you? That’s how I would approach the problem first. I’ve seen many people use CSS to make responsive elements in their Write.as blogs, maybe the same could be done with tables here.
Yes, adding custom CSS solves the problem, but not entirely.
I prefer Markdown in posts, so publishing HTML version of table with data-label attributes in <td> elements is not a good solution. At the same time, I would not like to mess around with backend code which process Markdown and turn it to HTML. Although the latter would enable post content remain as-is (in Markdown).
It would be nice if WriteFreely had hooks like WordPress does so that right before returning post output additional function could kick in to make few replacements. But I believe that is way bigger topic when it comes to possibility of adding plugins 