Вращающийся текст заголовка таблицы с CSS трансформирует

Это выглядит, как это должно быть возможно со следующим:Вращающийся текст заголовка таблицы с 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 - размер ячейки рассчитан до текст повернут!

screenshot of bug

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

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

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

источник

2009-04-04 Keith

в FF3, заголовки не повернуты (правильно ли установлена тестовая страница? s в «вертикальный» класс », но это может быть потому, что CSS недействителен для FF3) –

Извинения - могут видеть стили, созданные в разметке, они просто не отображаются в правой панели CSS в Firebug –

Не работает в FF3, потому что он не поддерживается до FF3.5 в соответствии с документами разработчика. https://developer.mozilla.org/En/CSS/-moz-transform – AnthonyWJones

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

Существенно, что преобразование элемента не изменяет способ вычисления его размера содержимого (или как его макет родителя влияет на этот размер). Алгоритмы CSS для вертикального и горизонтального калибровки различны и достаточно сложны, чтобы получить право на существование; нет реального последовательного способа, которым они могли бы размещать контент с произвольным вращением. Таким образом, «преобразование» похоже на «position: relative»: оно изменяется там, где контент отображается, но не имеет ничего общего с размером макета.

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

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

источник

2009-04-04 13:40:09 bobince

Возможно использование встроенного 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.

источник

2010-08-18 18:57:46

Спасибо, я посмотрю. Это выглядит элегантно :) – EarlyPoster

Это хорошая идея. Я мог бы также использовать Javascript Canvas. Однако в обоих случаях мне нужно явно задавать ширину и высоту ячеек - если бы я мог сделать, что преобразование CSS можно было бы заставить работать. Моя проблема в том, что я не знаю точного размера текста в этих ячейках; Мне нужно, чтобы они растянулись, чтобы соответствовать контенту. – Keith

Не работает в IE 9. –

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

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

источник

2011-02-14 06:57:13 doublejosh

Webkit добавил:

-webkit-writing-mode:vertical-rl;

Что вы можете обратиться к div.

источник

2011-12-07 00:37:46

Который вращается на 90 градусов, а не на 270 градусов ... –

Как я ответил a similar question, я решил это, используя a jQuery plugin by 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, которые вы хотите повернуть, имеют класс« вертикальный ».

Адрес a demo running in a jsFiddle.

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

источник

2012-08-25 20:57:19

Это решение сработало для меня очень хорошо. В текущем FF и IE9 (по крайней мере). – Tillito

Для того, чтобы вращали текст внутри ваших заголовков таблицы:

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

Done.

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

enter image description here

Что вы можете увидеть на этой странице, если вы сделаете свое окно тощим - менее 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; 
}

источник

2014-01-29 20:32:58

Вы также можете добавить ... white-space: nowrap; ... помочь с несколькими словами – bashaus

Вращающийся текст заголовка таблицы с CSS трансформирует

ответ

Смежные вопросы