CSS3 проблемы выравнивания преобразования внутри таблицы

применение преобразований в таблицах заставляет все браузеры сходить с ума. Я также столкнулся с многострочной проблемой, и единственным обходным путем, который я нашел, было изменение разметки таблицы, чтобы это не div, который вращается, это вся таблица.

вы затем "unrotate" заголовки таблицы с обратным преобразованием:

http://jsfiddle.net/G93KE/

Я понятия не имею, работает ли это с фильтрами IE7-8.

Как Duopixel, (unrotate)

<style>

body { font-family: "Times New Roman", Times, serif; padding:10px; }
td, tr, th, table { border:1px solid #333; }
td:nth-child(odd) { background:#eee; } /* No IE, No Cares */

td.title { width:200px; }

table {       
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg) !important;
    transform: rotate(-90deg);
    -webkit-transform-origin:0 0;
    -moz-transform-origin:0 0;
    -ms-transform-origin:0 0;
    -o-transform-origin:0 0;
    transform-origin:0 0;
    background-color:transparent;

    width:250px; 

    position:relative;
    top:250px;
  }

td > div {       
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg) !important;
    transform: rotate(90deg);
    -webkit-transform-origin:0 0;
    -moz-transform-origin:0 0;
    -ms-transform-origin:0 0;
    -o-transform-origin:0 0;
    transform-origin:0 0;
    background-color:transparent;

    position:relative; /*Needed to position in the correct columns*/
    height:20px; /* Need to not set this, needed for columns to fill*/
    left:20px; /*Needed to line up, .5 of width - padding*/
}

</style>

<!--[if LT IE 9]>
    <style>
        table {
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
            top:0px;
        }
        td div { /* ah..? didn't action of filter..? by td > div..? */
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
            overflow:hidden;
            width:20px; /* fix to number.. */
            height:20px; /* fix to number.. */
        }
    </style>
<![endif]-->
<table>
    <tr>
        <td class=title >Report Results 1</td>
        <td><div>01</div></td>
    </tr>
    <tr>
        <td class=title >Shinanigans</td>
        <td><div>02</div></td>
    </tr>
    <tr>
        <td class=title >CSS Transforms Suck</td>
        <td><div>03</div></td>
    </tr>
    <tr>
        <td class=title >Lorem Ipsum</td>
        <td><div>04</div></td>
    </tr>
    <tr>
        <td class=title >So Damn Pixelated</td>
        <td><div>05</div></td>
    </tr>
    <tr>
        <td class=title >This font looks Terrible</td>
        <td><div>06</div></td>
    </tr>
    <tr>
        <td class=title >Too Long to read on 1 line Set dimensions suck</td>
        <td><div>07</div></td>
    </tr>
    <tr>
        <td class=title >Grumble Grumble.</td>
        <td><div>08</div></td>
    </tr>
    <tr>
        <td class=title >Homebrew!</td>
        <td><div>09</div></td>
    </tr>
    <tr>
        <td class=title >Spotify Commercial Suck</td>
        <td><div>10</div></td>
    </tr>
    <tr>
        <td class=title >Grooveshark FTW!</td>
        <td><div>11</div></td>
    </tr>
    <tr>
        <td class=title >Beer time yet?</td>
        <td><div>12</div></td>
    </tr>
</table>

сначала исправим перекрывающийся текст: тд{белый-пространство:без переноса;}

преобразования CSS несколько похожи на" position:relative " в одном аспекте, они изменяют рендеринг объекта, а не его положение в потоке. Это означает, что в настоящее время нет способа динамически регулировать высоту ячейки на основе ширины div (по крайней мере, до начала реализации CSS-выражений).

с этой находкой в виду, мы теперь свободны принять div из потока все мы хотеть. Я собираюсь пойти и установить его абсолютно в верхнем левом углу родительской ячейки. Будучи обученным профессионалом, я могу это делать.: td{положение: относительное;} td>div{position: absolute; top: 0; left: 0;}

ну посмотрите на это, теперь все содержимое ячейки было сдвинуто вверх. Мы не можем просто отрегулировать положение блока, поскольку это повлияет на то, как он трансформируется; вместо этого мы отрегулируем смещение блока: рентабельность:100% 0 -100%;

мы взяли элемент из потока выше (и по уважительной причине тоже), теперь мы просто применим высоту к родительской ячейке, и нам хорошо идти:

http://jsfiddle.net/ZWBHS/2/

обновление:

вы всегда можете добавить свойство переполнения текста и исправить размер текста и ячейки, чтобы он требовал минимального обновления работы, напримерhttp://jsfiddle.net/ZWBHS/3/

чтобы усеченный текст не терялся, возможно, добавьте атрибут title дублируя его?