kybernator wrote:Would it be possible to have a minimal distance between table cells, so that the info remains readable? I am talking about the way how, in my example, day and time practically fuse.
Tables are very hard in a responsive context. That is mostly because their content is unpredictable, so it is next to impossible to find a generic solution that “works everywhere”. The number of columns and rows is variable, as is the length and content of the table cells. It is BTW pure coincidence that it does actually fit in your test case.
There is no “minimal margin” in CSS. You could add a padding to the table cells, but that breaks the layout on small screens (meaning the page scrolls horizontally because the table is wider than the content).
There is a great JS solution for this called tablesaw
. I'm reluctant to include it in Next because at least 75% of all bloggers never use tables, so it would be an overhead. There is also a CSS-only solution
, but it's pretty complicated, not really usable as a generic solution and does not work in old IEs. You could use that as an individual solution in your user.css, though.
Another solution would be to not use a table (but, for instance, a list). That might also be interesting if you plan to use a WYSIWYG editor and have authors that don't know HTML. In my experience (which is, of course, subjective), WYSIWYG and tables don't work well, especially not with authors that don't know HTML.