Поворот текста заголовка таблицы с помощью CSS-преобразований

Похоже, это должно быть возможно со следующим:

.verticalText 
{           
    /* IE-only DX filter */
    writing-mode: tb-rl;
    filter: flipv fliph;

    /* Safari/Chrome function */
    -webkit-transform: rotate(270deg);

    /* works in latest FX builds */
    -moz-transform: rotate(270deg);
}

Это работает в IE.

В Safari, Chrome и FX это происходит неправильно, размер ячейки вычисляется до того, как текст повернут!

Вот демо: http://jsfiddle.net/HSKws/

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

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

Ответ 1

'изменяет ориентацию всего элемента, который вы объявляете, а не текстовое содержимое внутри него. Это больше похоже на свойство матрицы IE, чем "режим записи".

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

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

FWIW: для меня на Fx3.1b3 пролет также вращается, как и другие. Однако в Windows с горизонтальным только сглаживанием (ClearType) рендеринг не выглядит великолепно... хорошо рендерное изображение может получиться значительно лучше.

Ответ 2

Возможно использование встроенного SVG в документе XHTML (я тестировал только Safari и Firefox):

<html xmlns="http://www.w3.org/1999/xhtml">
  <body>
    <table border="1">
        <tr>
            <td>&#160;</td>
            <td>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="150">
                  <text id="thetext" transform="rotate(270, 12, 0) translate(-140,0)">Example column header</text>
                </svg>
            </td>
            <td>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="150">
                  <text id="thetext" transform="rotate(270, 12, 0) translate(-140,0)">Example column header</text>
                </svg>
            </td>
            <td>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="150">
                  <text id="thetext" transform="rotate(270, 12, 0) translate(-140,0)">Example column header</text>
                </svg>
            </td>
        </tr>
        <tr>
            <td>Example row header</td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
  </body>
</html>

К сожалению, вам нужно явно установить ширину и высоту ячеек таблицы и перевод текста, отображаемого с помощью SVG. Кроме того, расширение файла должно быть xhtml.

Ответ 3

Webkit добавил:

-webkit-writing-mode:vertical-rl;

Что вы можете применить к div.

Ответ 4

Как я ответил на аналогичный вопрос, я решил это с помощью плагина jQuery David Votrubec и комментарий Майка ниже сообщения в блоге.

Поместите это в .js файл:

(function ($) {
  $.fn.rotateTableCellContent = function (options) {
  /*
Version 1.0
7/2011
Written by David Votrubec (davidjs.com) and
Michal Tehnik (@Mictech) for ST-Software.com
*/

var cssClass = ((options) ? options.className : false) || "vertical";

var cellsToRotate = $('.' + cssClass, this);

var betterCells = [];
cellsToRotate.each(function () {
var cell = $(this)
, newText = cell.text()
, height = cell.height()
, width = cell.width()
, newDiv = $('<div>', { height: width, width: height })
, newInnerDiv = $('<div>', { text: newText, 'class': 'rotated' });

newInnerDiv.css('-webkit-transform-origin', (width / 2) + 'px ' + (width / 2) + 'px');
newInnerDiv.css('-moz-transform-origin', (width / 2) + 'px ' + (width / 2) + 'px');
newDiv.append(newInnerDiv);

betterCells.push(newDiv);
});

cellsToRotate.each(function (i) {
$(this).html(betterCells[i]);
});
};
})(jQuery);

И это в верхней части страницы:

<script src="rotatetablecellcontent.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.yourtableclass').rotateTableCellContent();
    });
</script>

И это в вашем CSS:

/* Styles for rotateTableCellContent plugin*/
table div.rotated {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    writing-mode:tb-rl;
    white-space: nowrap;
}

thead th {
    vertical-align: top;
}

table .vertical {
    white-space: nowrap;
}

Затем убедитесь, что в вашей таблице есть класс "yourtableclass", и что все TD, которые вы хотите повернуть, имеют класс "вертикальный".

Здесь демонстрационная работа в jsFiddle.

Надеюсь, это поможет кому-то, хотя я опаздываю на два года!

Ответ 5

Этот инструмент сделал все для меня...

http://www.boogdesign.com/examples/transforms/matrix-calculator.html

Ответ 6

Для поворота текста внутри заголовков таблицы:

Поместите содержимое заголовка внутри divs - поверните эти div, а не сам заголовок
Установите положение: относительное на заголовках таблицы th, позиция: абсолютная на повернутых div.
Установить высоту заголовков th.

Готово.

Вы можете увидеть это здесь:

Что вы можете увидеть на этой странице, если вы сделаете свое окно тощим - менее 1000 пикселей, и оно вращает заголовки таблицы - http://www.rugbydata.com/

Вот код, который я использовал:

div.rotatabletext {
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
width:0px;
text-align:left;
height:0px;
margin-left:0px;
margin-top:0px;
bottom:2px;
position:absolute;
}
table.tournamentresults > * > tr > td {
padding:1px;
}
table.tournamentresults > thead > tr:nth-child(1) > th:nth-child(1) {
height:70px;
position:relative;
}
table.tournamentresults > thead > tr:nth-child(2) th {
height:70px;
position:relative;
}