15

I played around with this for an hour or so before deciding that I was over my head when it comes to CSS stuff like this. Basically I am attempting to have a header cell with rotated text on my page. The rotation seemed to be simple enough--thanks stackoverflow community!--but the width of the column is not working for me. Does anyone have any tips for getting the "Overall Satisfaction" column to be narrow?

Target is for IE, although I would love to have it work in the big browsers.

You can see some of my leftovers from messing around with it... DIV's in each TH cell, height of the TR, etc. None of that is necessary for what I am trying to accomplish.

The whole point of rotating the text was to save horizontal real estate and from what I am seeing, that is not happening.

Here's my simplified try:

<style>
.rotate {
    padding: 0px 0px 0px 0px;
    margin: 0px;
}
.rotate div {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);

    writing-mode: bt-rl;

    padding: 0px 0px 0px 0px;
    margin: 0px;
    text-align: left;
    vertical-align: top;
}
</style>

<table border=1>
    <thead>
        <tr style="line-height: 200px">
            <th><div>Facility</div></th>
            <th><div>Date</div></th>
            <th><div>Score</div></th>
            <th class="rotate"><div>Overall&nbsp;Satisfaction</div></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Los Angeles</td>
            <td>11/12/2010</td>
            <td>3.5</td>
            <td>2.5</td>
        </tr>
        <tr>
            <td>San Diego</td>
            <td>11/17/2010</td>
            <td>10.0</td>
            <td>10.0</td>
        </tr>
    </tody>
</table>
methodofaction
  • 70,885
  • 21
  • 151
  • 164
Erik
  • 304
  • 2
  • 5
  • 10

4 Answers4

11

You need to apply position absolute to the div so it no longer occupies the horizontal space (the column will auto adjust to the width of the rest of the cells). Then a text-indent to reposition the element within the cell:

.rotate div {position: absolute;}

.rotate {

    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    writing-mode: bt-rl;
    text-indent: -3em;
    padding: 0px 0px 0px 0px;
    margin: 0px;
    text-align: left;
    vertical-align: top;
}

http://jsfiddle.net/p4EPd/

Edit: fix for ie

.rotate div {
    -webkit-transform: rotate(-90deg) translate(0, 10px);
    -moz-transform: rotate(-90deg)  translate(0, 10px);
    writing-mode: bt-rl;
    padding: 0;
    margin: 0;
    height: 125px;
}

th.rotate {padding-top: 5px;}

http://jsfiddle.net/6Xjvm/

You can apply both through use of conditional comments.

methodofaction
  • 70,885
  • 21
  • 151
  • 164
  • Thanks Duopixel, this definitely gets it closer in chrome. But IE is still not working. Any IE specific tips? What I am seeing is that the rotate is happening correctly, but the text is not being positioned right. If I don't have a header row height style, the rotated text overlays the data in the data rows. Even if I do size the height of the header row, the text is not directly above the column in question. – Erik Dec 28 '10 at 06:42
  • Is there a benefit to `padding: 0px 0px 0px 0px;` instead of `padding:0;` ? – ashleedawg Oct 30 '19 at 05:28
  • @ashleedawg no, it's just the author's original code. – methodofaction Oct 30 '19 at 13:44
  • Instead of using a `text-indent`, you could add a `translate(..., ...)` to your `transform`. – Ludovic Kuty Jul 18 '22 at 14:55
5

Just use the following css:

writing-mode: vertical-lr; transform: rotate(180deg);

rargueso
  • 91
  • 1
  • 3
0

In the table level css declaration add table-layout:fixed; This ensures that the width of the tables columns stays exactly as you declare it no matter what images or text is placerd in each cell.

By the way - instead of:

.rotate {
    padding: 0px 0px 0px 0px;
    margin: 0px;
}
.rotate div {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);

    writing-mode: bt-rl;

    padding: 0px 0px 0px 0px;
    margin: 0px;
    text-align: left;
    vertical-align: top;
}

<th><div>Facility</div></th>

try:

.rotation {
    display:block;
    /* for firefox, safari, chrome, etc. */
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);/* For Opera*/
    -khtml-transform: rotate(-90deg);/* For Lunix*/
    /* for ie */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
<th>Facility</th>

which is less code and a simplified approach and solves the IE issues.

(Sorry for the answer layout problem above)

damon
  • 14,485
  • 14
  • 56
  • 75
Steve
  • 1
-3

This should be HTML TABLE lesson Day 2, but it isn't.

css table property: "table-layout:fixed"

fantazea
  • 1
  • 1