html - poner - Girar texto como encabezados en una tabla(navegador cruzado)
girar texto en numbers (0)
Esto no es una pregunta.
Simplemente sentí que después de pasar tanto tiempo averiguando cómo hacer esto me odiaría a mí mismo si no lo guardara en algún lado y sería un programador pésimo si no compartiera lo que había encontrado. (Matando dos pájaros de un tiro aquí).
Así que aquí está el código para rotar el texto en una tabla para que actúe como un encabezado.
<html>
<head>
<!--[if IE]>
<style>
.rotate_text
{
writing-mode: tb-rl;
filter: flipH() flipV();
}
</style>
<![endif]-->
<!--[if !IE]><!-->
<style>
.rotate_text
{
-moz-transform:rotate(-90deg);
-moz-transform-origin: top left;
-webkit-transform: rotate(-90deg);
-webkit-transform-origin: top left;
-o-transform: rotate(-90deg);
-o-transform-origin: top left;
position:relative;
top:20px;
}
</style>
<!--<![endif]-->
<style>
table
{
border: 1px solid black;
table-layout: fixed;
width: 69px; /*Table width must be set or it wont resize the cells*/
}
th, td
{
border: 1px solid black;
width: 23px;
}
.rotated_cell
{
height:300px;
vertical-align:bottom
}
</style>
</head>
<body>
<table border=''1''>
<tr>
<td class=''rotated_cell''>
<div class=''rotate_text''>Test1</div>
</td>
<td class=''rotated_cell''>
<div class=''rotate_text''>TEST2</div>
</td>
<td class=''rotated_cell''>
<div class=''rotate_text''>WOOOOOOOOOOOOOOOOHOOOOOO</div>
</td>
</tr>
<tr><td>X</td><td>X</td><td>X</td></tr>
<tr><td>X</td><td>X</td><td>X</td></tr>
<tr><td>X</td><td>X</td><td>X</td></tr>
<tr><td>X</td><td>X</td><td>X</td></tr>
</table>
</body>
</html>