Вертикально поворачивать текст внутри ячейки заголовка таблицы HTML

Ответ 1

Если вам нужно настроить только ширину ячеек и содержать только одну строку текста, вы можете сделать это: http://jsfiddle.net/sSP8W/3/ - установите width элемента в него line-height.

Проблема с CSS3-преобразованиями заключается в том, что они работают как CSS 'position: relative: их исходная ячейка остается неизменной, поэтому поворот, перекос и т.д. не вызывают изменений в размерах элемента. Итак: на самом деле нет идеального решения для CSS, вы можете использовать JS для настройки размеров или попытаться найти обходные способы обмана. Поэтому, если у вас есть только ссылки в таблице, вы можете сделать что-то вроде этого: http://jsfiddle.net/sSP8W/4/ - вращение самой таблицы.

Если в вашем случае есть другой контент, который вы не хотите вращать, обновите сообщение, чтобы мы могли найти лучшее решение.

upd: Просто нашел решение для повернутого текста в таблицах: с помощью какой-то магии с вертикальными paddings мы могли бы сделать ячейки растянутыми по содержанию, так что посмотрите на этот почти последний пример: http://dabblet.com/gist/4072362

Ответ 2

Я решил это, используя плагин 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.

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

Ответ 3

В IE и Chrome (Blink и Webkit) вы можете поместить текст в дочерний элемент с вертикальным режимом записи, а не с помощью преобразования. Сохраняет все трюки CSS и JavaScript. На данный момент Chrome имеет незначительную ошибку отображения (Chrome 37), но сообщалось.

.vertical { 
    -webkit-writing-mode:vertical-rl; 
    -ms-writing-mode:tb-rl; 
    writing-mode:vertical-rl; 
 }

 <td><span class="vertical">This text should be vertical.</span></td>

Я рекомендую использовать white-space:nowrap по вертикальному тексту внутри таблицы.

Ответ 4

Решение от jobjorn выше в настоящее время ломается в Chrome, потому что оно поддерживает режим записи на начало 2016 года, поэтому по существу пытается дважды повернуть текст и заканчивается с измененным горизонтальным текстом. По моему мнению, Firefox и Safari, вероятно, тоже скоро это подтвердят, что также приведет к их перерыву. После того, как я ударил головой о стену, я исправил ее, изменив CSS:

@supports not (writing-mode:vertical-rl) {
    table div.rotated {
        -webkit-transform: rotate(270deg);
        -moz-transform: rotate(270deg);
        white-space: nowrap;
    }
}

@supports (writing-mode:vertical-rl) {
    table div.rotated {
        writing-mode:vertical-rl;
        -webkit-transform: rotate(180deg) translate(8px,0px);
        -moz-transform: rotate(180deg) translate(8px,0px);
        white-space: nowrap;
    }
}

8-пиксельный перевод был тем, что нужно, чтобы выравнивание выглядело правильно в моем конкретном примере. Вы можете варьироваться. Вращение на 180 градусов должно было сделать вершину текста левой, а не правой. Если вам это не нужно, вы, вероятно, можете пропустить преобразования во второй части.

В JavaScript вам также необходимо убедиться, что вы не переместите начало координат для этих последних преобразований, поскольку это было необходимо, только если вы использовали преобразование для самой вертикальной ориентации, поэтому я завернул эту часть в условное:

var supportsWM = CSS.supports('writing-mode', 'vertical-rl');
if (!supportsWM) {
    newInnerDiv.css('-webkit-transform-origin', (width / 2) + 'px ' + (width / 2) + 'px');
    newInnerDiv.css('-moz-transform-origin', (width / 2) + 'px ' + (width / 2) + 'px');
}

Ответ 5

Моды: извините, что этот пост "отвечает на ответ". Но у меня нет кармы, необходимой для ее комментирования. Catch-22.

Код в @jobjorn answer и fiddl зависит от ширины ячейки для вычисления высоты заголовка, что приводит к ошибочным высотам, когда какая-либо ячейка широкая. Этот измененный скрипт использует вместо этого ширину текста заголовка: http://jsfiddle.net/marvmartian/76z82/

    cellsToRotate.each(function () {
        var cell = $(this);
        var s = '<div id="killme" style="position:absolute; top:-10000px; left:-10000px;"><span id="string_span" style="font-weight: bold; font-size: 1em">'+
            cell.text()+'</span></div>';
        $(window).append(s);
        var width = $('#string_span').width();
        var newText = cell.text()
            , height = cell.height()
            //, width = cell.width()
            , newDiv = $('<div>', {  height: width,  width: height })
            , newInnerDiv = $('<div>', { text: newText, 'class': 'rotated' });

Ответ 6

Избавьтесь от padding:60px 1px; (если вам это не нужно по какой-то другой причине... но вот что вызывает проблему).

Пример: http://jsfiddle.net/purmou/sSP8W/