Message table too wide on mobile browsers

[david-christiansen]

The table of messages on the front page of the generated site is too wide on mobile browsers:

Perhaps the number and message fields can be stacked, and the "since" field omitted on very narrow screens?

[klequis]

I looked around for different methods for making tables responsive. The short story is they aren't very responsive but there are a handfull of tricks out there to help.

The solution I see most often suggested is Responsive Data Tables.

Here is a working mockup: http://haskell-error-index.s3-website-us-west-2.amazonaws.com/
I just did a quick tweak of the example without changing any of the formatting, so it doesn't look like a Haskell site and there is lots of wasted space. However, it does demonstrate the functionality.

I would like to suggest that the column labels (now kind of row labels) add little value in the small screen layout and think eliminating them in favor of having one column would improve readability and decrease vertical scroll. Messages would be separated visually by the alternating gray/whit background as in the example. Let me know what you think.

All the code for the example is in these two files

• https://github.com/klequis/css-tricks-tbl/blob/main/public/index.html
• https://github.com/klequis/css-tricks-tbl/blob/main/public/styles.css