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

Question

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

    table#MyTable tr th a{
    color: #FFFFFF;
    display: block;
    /*Firefox*/
    -moz-transform: rotate(-90deg);
    /*Safari*/
    -webkit-transform: rotate(-90deg);
    /*Opera*/
    -o-transform: rotate(-90deg);
    /*IE*/
    writing-mode: tb-rl;
    filter: flipv fliph;
    padding: 60px 1px;
}

Answer 1

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

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

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

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

Answer 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 .

Надеюсь, это кому-нибудь поможет, даже если ягод опоздал!

Answer 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 для вертикального текста в таблице.

Answer 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');
}

Answer 5

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

Код в ответе @ jobjorn и 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' });

Answer 6

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

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