texto giratoria cabecera de la tabla con CSS transforma

Esta parece que debería ser posible con lo siguiente:texto giratoria cabecera de la tabla con CSS transforma

.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); 
}

Esto funciona en IE.

Se produce un error de forma extraña en Safari, Chrome y FX: el tamaño de la celda se calcula antes de ¡se gira el texto!

screenshot of bug

Aquí es una demostración: http://jsfiddle.net/HSKws/

estoy usando imágenes dinámicas como una solución, a pesar de que also has its problems. Estoy contento con eso como un retroceso, pero parece que debería haber una manera de hacer que este CSS funcione, ya casi está ahí.

Alguien sabe una manera de hacer que las células se ajustan al contenido después de la transformada se ha aplicado?

Fuente

2009-04-04 Keith

en FF3, los encabezados no están girados (¿la página de prueba está configurada correctamente? No hay un estilo CSS) s a la clase "vertical", pero podría ser porque el CSS no es válido para FF3) –

Disculpas: pueden ver los estilos configurados en el marcado, simplemente no aparecen en el panel derecho de CSS en Firebug –

No funciona en FF3 porque no es compatible hasta FF3.5 según los documentos del desarrollador. https://developer.mozilla.org/En/CSS/-moz-transform – AnthonyWJones

‘transformar’ altera la orientación de todo el elemento se declara en, no el contenido de texto en su interior. Es más como propiedad de 'matriz' de IE que 'modo de escritura'.

Crucial, la transformación de un elemento no cambia la forma en que se calcula el tamaño de su contenido (o cómo se ve afectado el diseño de su principal por ese tamaño). Los algoritmos de CSS para el tamaño vertical y horizontal son diferentes y lo suficientemente difíciles de lograr; no hay una manera real y consistente de que puedan acomodar el contenido con rotación arbitraria. Así que 'transformar' es como usar 'position: relative': cambia donde se representa el contenido, pero no tiene nada que ver con el tamaño del diseño.

Así que si quieres incluir uno en una tabla necesitarás establecer la altura de la celda explícitamente para acomodar el 'ancho' rotado esperado. Si no lo sabes de antemano, posiblemente puedas piratearlo con JavaScript, quizás.

Fwiw: para mí en el lapso Fx3.1b3 es girado también como los demás. Sin embargo, en Windows con su anti-aliasing horizontal solamente (ClearType) la representación no se ve muy bien ... una imagen bien renderizada podría salir mucho mejor.

Fuente

2009-04-04 13:40:09 bobince

Es posible utilizando SVG en línea en un documento XHTML (sólo probé Safari y 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>

Desafortunadamente, usted tiene que establecer explícitamente la anchura y la altura de las celdas de la tabla y la traducción de la texto representado usando SVG. Además, la extensión del archivo debe ser xhtml.

Fuente

2010-08-18 18:57:46

Gracias, lo investigaré. Se ve elegante :) – EarlyPoster

Esa es una buena idea. También podría usar un lienzo de Javascript. Sin embargo, en ambos casos necesito establecer explícitamente el ancho y el alto de las celdas; si pudiera hacer eso, se podría hacer que la transformación CSS también funcione. Mi problema es que no sé el tamaño exacto del texto en estas celdas; Necesito que se estiren para adaptarse al contenido. – Keith

No funciona en IE 9. –

Esta herramienta hicieron todo el pensamiento para mí ... ha añadido

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

Fuente

2011-02-14 06:57:13 doublejosh

Webkit:

-webkit-writing-mode:vertical-rl;

que se pueden aplicar a un div.

Fuente

2011-12-07 00:37:46

Que gira 90 grados, y no 270 grados ... –

Como respondí en a similar question, lo solucioné esto utilizando a jQuery plugin by David Votrubec y el comentario de Mike por debajo de la entrada del blog.

Ponga esto en a.js-archivo:

(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);

Y esto en la parte superior de la página:

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

Y esto en tu 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; 
}

A continuación, asegúrese de que su tabla tiene la yourtableclass clase" ", y que todos los TD que desee rotar tienen la clase" vertical ".

Aquí está a demo running in a jsFiddle.

Espero que ayude a alguien, ¡aunque tengo dos años de retraso!

Fuente

2012-08-25 20:57:19

Esta solución funcionó muy bien para mí. En FF actual e IE9 (al menos). – Tillito

el fin de tener texto girado dentro de sus cabeceras de tabla:

Coloque el contenido de la cabecera dentro de divs - rotar estos divs en lugar de la propia cabecera
Establecer la posición: relativa en los encabezados de la tabla th, posición: absoluta en los divs rotados.
altura Conjunto de cabeceras th demasiado

Done.

Se puede ver aquí:

enter image description here

que se puede ver en esta página si usted hace su ventana flaca - menos de 1000 píxeles y hace girar el encabezados de tabla - http://www.rugbydata.com/

aquí está el código que utilicé:

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; 
}

Fuente

2014-01-29 20:32:58

También podría agregar ... white-space: nowrap; ... para ayudar con múltiples palabras – bashaus

texto giratoria cabecera de la tabla con CSS transforma

Respuesta

Cuestiones relacionadas