How would you implement web UI with some text rotated by 90°

Question

I have a view that displays a table:

• rows represent days - one row per day
• columns represent my group entity - each column head display group name and a + icon that expands the group into several additional columns that represent group items; so basically I have expandable column grouping; only one group will be expanded at a time;

When user clicks on the + beside group name, a series of columns should be added to this table each representing calendar data of each of these group items. In other words a group will be expanded to its items. If any other group has been displayed so far, it will be contracted before the new one will get expanded.

My form is Ajax powered. When page loads only calendar worw are filled and group headers are added to columns.

Problems

1. I'm not sure how to implement this table in the first place? Whould I use table element or use floated div/ul? All content cells (not headers and not first column with calendar dates) have the same dimension so I could use other things than a table. Why do I lean toward div/ul implementation? Because with floating it would be easier to dynamically load additional columns that represent group items. I suppose this would be tricky to implement using tables, because we can't have column groups as we can have TBODY elements of column rows (transposing this data is not possible).

2. Since my columns widths have to be the same as well I have to display group and item names vertically. This way all columns will have the same width but they have to display text this way in IE (if possible V7+), FF and CH.

Questions

1. How do you suggest this view should be done (using table or div/ul elements)? You can also suggest a completely different alternative that didn't come to my mind; maybe you've implemented something similar yourself...

2. How to reliably rotate text of my headers? I've seen matrix filters on IE and transforms on mozilla and webkit browsers, but text looks positioned out of the original content box. I've also seen SVG implementations but I don't know about its browser support (AFAIK IE doesn't support it without plugins).

3. Is there a way I can keep columns with the same width but don't use text rotation?

Answer 1

Solution that works on FF, CH and IE

This is what I ended up with and works rather well across different major browsers (FF, CH and IE). I tested it in IE8 and it worked and it also works in IE9. So here it is for future reference in case you may need it yourself:

1. I'm not using tables but rather floated DIVs
2. Every cell is a separate DIV with header
3. Headers have rotated text

Rotated text still keeps dimensions before transformation so it's best to contain it within a different element that actually gives it vertically equivalent dimension. This way other content flow doesn't break.

This is the simplified HTML code:

<div class="head">
    <div class="vert">Vertical text example</div>
</div>

and accompanying CSS:

.container .head
{
    /* float your elements or inline-block them to display side by side */
    float: left;
    /* these are height and width dimensions of your header */
    height: 10em;
    width: 1.5em;
    /* set to hidden so when there's too much vertical text it will be clipped. */
    overflow: hidden;

    /* these are not relevant and are here to better see the elements */
    background: #eee;
    margin-right: 1px;
}
    .container .head .vert
    {
        /* line height should be equal to header width so text will be middle aligned */
        line-height: 1.5em;
        /* setting background may yield better results in IE text clear type rendering */
        background: #eee;
        display: block;

        /* this will prevent it from wrapping too much text */
        white-space: nowrap;
        /* so it stays off the edge */
        padding-left: 3px;

        /* IE specific rotation code */
        writing-mode: tb-rl;
        filter: flipv fliph;

        /* CSS3 specific totation code */
        /* translate should have the same negative dimension as head height */
        transform: rotate(270deg) translate(-10em,0);
        transform-origin: 0 0;
        -moz-transform: rotate(270deg) translate(-10em,0);
        -moz-transform-origin: 0 0;
        -webkit-transform: rotate(270deg) translate(-10em,0);
        -webkit-transform-origin: 0 0;
    }