Вертикальный текст в заголовке таблицы (Firefox)

[Casufi]

Нужно расположить текст текст в заголовках к таблице вертикально, в идеале решение должно работать в Google Chrome и Firefox но вполне достаточно только Firefox.

Проую прописать

-moz-transform: rotate(270deg); -moz-transform-origin: 50% 50%;

и получаю вот такую вот картинку

Вот копия стиля с элемента

element.style {
    transform: rotate(270deg);
    transform-origin: 50% 50% 0;
}
.t20Standard th.t20ReportHeader {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #AAAAAA #AAAAAA #AAAAAA -moz-use-text-color;
    border-image: none;
    border-style: solid solid solid none;
    border-width: 1px 1px 1px medium;
}
th.t20ReportHeader {
    background-color: #CFE0F1;
    padding: 2px 8px;
    white-space: nowrap;
}

Подскажите, каким образом развернуть текст в заголовке таблицы ?

[satantx]

Вам нужно только для этих двух ячеек? Попробуйте задать им размер.

[satantx]

Стиль

p {
-webkit-transform: rotate(270deg);
}
.thh {
width: 50px;
height: 300px;
}

Код

<table width="200" border="1">
  <tr>
    <th scope="col">Пункт 1</th>
    <th scope="col">Пункт 2</th>
    <th scope="col">Пункт 3</th>
    <th scope="col">Пункт 4</th>
    <th scope="col">Пункт 5</th>
    <th class="thh" scope="col"><p>Администрирование портала</p></th>
  </tr>
  <tr>
    <td> 1</td>
    <td> 2</td>
    <td> 3</td>
    <td> 4</td>
    <td> 5</td>
    <td> 6</td>
  </tr>
</table>

Edited December 13, 2012 by satantx

[Casufi]

Я не знаю высоту и ширину ячеек заранее