Вертикальный текст в IE в ячейке таблицы

Я пытаюсь повернуть некоторый текстовый кросс-браузер в ячейку тонкой таблицы, которая охватывает несколько строк. Я хочу, чтобы это было приятное компактное резюме строк, поэтому оно тонкое и повернутое на 90 градусов. Советы, описанные здесь:

Вертикальный (повернутый) текст в таблице HTML

работает как шарм, за исключением неожиданного сюрприза, IE, где текст повернут, но текст обрезается до ширины ячейки.

Вот соответствующие стили:

#schedmenu td.label {
/*width:22px;*/
/*width:100%*/
vertical-align:middle;
font-size:12.5px;
}


#schedmenu td.label span {
display:block;
-moz-transform: rotate(-90deg);  /* FF3.5+ */
  -o-transform: rotate(-90deg);  /* Opera 10.5 */
 -webkit-transform: rotate(-90deg);  /* Saf3.1+, Chrome */
        filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
                M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',
                M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17)"; /* IE8 */
          zoom: 1;

color:white;
position:relative;
top:12px;
}

и html:

<td class="label" rowspan="3"><span>Recent</span></td>

Ты станешь моим героем, если ты сможешь получить меня мимо этого:)

Ответ 1

Я создал 2 CSS, один для IE и один для остальных браузеров. Для IE я использовал:

style="color:black; line-height:20px; writing-mode: tb-rl; filter: flipH() flipV();"

Ответ 2

Если бы я был вами, я бы открыл InkScape и создал три разных изображения.

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

Я часто делаю очень красивый дизайн css, который работает в chrome и firefox, а затем распечатывает его, обрезает и заменяет фактический дизайн изображениями, и все это работает в IE.

или span: dispaly: блок и высота: 100%;??

Ответ 3

Я обнаружил, что, хотя это, казалось, сработало, оно было отрезано, как и в вашем оригинальном посте. После игры с несколькими опциями я добавил "table-layout: fixed;" к таблице css. Таким образом, я мог бы заставить все мои ширины столбцов к их необходимому и весь диапазон появлялся.

В настоящее время тестируется только в IE8, но я считаю, что он должен работать в кросс-браузере, так как единственное, что я действительно добавил, это табличный макет, который, я считаю, полностью принят? Установка фиксированного значения делает все столбцы равными (игнорируя контент), за исключением тех случаев, когда были установлены ширины, поэтому вам нужно установить все свои ширины там, где это необходимо.

Просто мысль в любом случае.

Мой связанный CSS:

table.comp{
    table-layout: fixed;
}
th.vertth {
    vertical-align:middle;
    height: 125px;
    width: 20px;
    overflow: hidden;
}
th.vertth span {
    -moz-transform: rotate(-90deg);  /* FF3.5+ */
    -o-transform: rotate(-90deg);  /* Opera 10.5 */
    -webkit-transform: rotate(-90deg);  /* Saf3.1+, Chrome */
    filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17)"; /* IE8 */
    zoom: 1;
    position:relative;
    display:block;
    margin: 0;
    width: 125px;
}

Обратите внимание, что ширина пролета должна быть такой же, как высота ячейки, чтобы предотвратить ее пролитие. Если у вас больше контента, чтобы перейти в промежуток, рассмотрите изменение размера столбца или ширины столбца.

Ответ 4

Не самый изящный способ, но он работает под IE8 (не использовался в старых версиях):

<td class="label" rowspan="3"><span>Recent<br/>&nbsp;</span></td>