JacquesCarette
HTML SRS: "Matrix" tables: Write header text vertically and scroll horizontally
The current tables we have are very difficult to navigate. The whole page needs to be moved around. I don't know what the "perfect" solution is, but I think that two things can help us a lot:
- Writing the heading text vertically (perhaps at an angle)
- Forcing a maximum width and scroll view around the table
(1) alone makes a big difference. For example, applying the following css:
th > a {
writing-mode: vertical-rl;
text-orientation: mixed;
white-space: nowrap;
}
Leads to something much more usable, albeit turning the head can be painful enough times:
Compared to the previous:
Of course, my CSS is not perfect. I only spent 15min reading through CSS documentation to figure out what to do. Adding transform: rotate(-20deg); or something similar to the above might make it slightly nicer as well. There's definitely some stuff we can do here:
Yes - but let's try to analyze our requirements before we jump to solutions. Spell out what you see as the 'real' problem, and then we can explore the space of potential solutions.
I agree that the tables are ugly, but I think this is down on our list of priorities. Good to record this issue, but we should be careful that solving this problem doesn't consume time spent on things that are publishable. :smile:
