HTML 中的宽表

Question

I'd like to display an overview of the access rights to some resources in a table on a webpage, with the resources as columns and users as rows. The cells are green or red if the user has access to the resource or not. The cells contain no other data than the color and therefore can be very small.

I have no problem with many rows, but as there are more and more resources, the table gets very wide, as the title of the resource can be around 30 characters long.

What general approach would you choose? Try to rotate the header row with nasty CSS hacks or something else?

Answer 1

Use:

.vertical-text {
    transform: rotate(90deg);
    transform-origin: left top 0;
}

Answer 2

I wouldn't take this aproach. I think is more usefull if you put a form with two drop lists one with items and the other one with employees and check it manually.