Girar texto en columna de tabla
Publicado por Alejandro (4 intervenciones) el 28/04/2017 12:19:18
Hola a todos. Necesito girar el texto de una celda dentro de una tabla pero no lo consigo. Tengo el siguiente html:
La idea es que algo similar se monte en el editor de texto TinyMCE para tenerlo como plantilla y que los usuarios puedan editar los texto, pero necesito que la columna de la izquierda se adapte al contenido y no me deje tanto espacio lateral.
Como puedo hacerlo ??? Alguna idea ???
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<style>
.rotate {
transform: rotate(-90deg);
margin: 5px; padding: 10px 20px;background-color: lightblue;
white-space: nowrap;
}</style>
</head>
<body>
<table border="1">
<tr>
<td><div class="rotate">Texto a la izquierda largo para comprobar<br />si se adapta bien al contenido de la columna</div></td>
<td>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae condimentum velit. Ut euismod ligula sit amet egestas finibus. Aenean non purus in ex rutrum tincidunt non eu nunc. Sed vitae elit tortor. Donec quam enim, iaculis ut feugiat quis, facilisis nec mauris. Fusce pellentesque tincidunt lectus, et sodales ipsum mollis sit amet. Curabitur ac ultricies orci. Maecenas euismod malesuada metus quis pretium. Morbi porta massa eros, quis luctus neque suscipit non.</p>
<p>Proin eget sapien molestie, ullamcorper sapien ut, malesuada est. Sed blandit eros ac nunc interdum, egestas pulvinar massa finibus. Fusce non sapien non leo hendrerit commodo. Phasellus hendrerit, risus eget pharetra ullamcorper, sapien quam ultricies leo, ac semper nisi ex posuere nunc. Vestibulum porta, mi nec fringilla rutrum, neque eros interdum lorem, sed dignissim ipsum risus a mi. Nam egestas ultricies urna vitae euismod. Morbi sem quam, scelerisque sit amet tincidunt vitae, pretium non dolor. Proin nec dapibus sem. Vestibulum non nisi nulla. Donec fermentum enim vel nibh posuere, sit amet convallis odio vestibulum. Donec nibh metus, congue ac nisl et, lacinia pulvinar dolor. Morbi ac urna odio. Donec eu sapien sit amet est vehicula sollicitudin. Pellentesque at venenatis est, sed pulvinar lacus. Curabitur fringilla sollicitudin sapien a porttitor. Phasellus non aliquet nisl.</p>
<p>Morbi purus elit, ultrices sit amet eros vel, dapibus semper libero. Aliquam vitae lobortis lectus, non finibus orci. Aenean tempor lobortis augue, vitae congue nisi commodo id. Ut fermentum molestie massa, sit amet interdum libero imperdiet in. Sed aliquet, ligula id hendrerit dignissim, lectus neque dignissim risus, eget dapibus nunc elit varius dolor. Nunc vitae mauris dui. Nulla magna est, consequat nec eleifend ac, blandit ut turpis. Duis facilisis, dui eu facilisis laoreet, ex turpis viverra sem, eu posuere metus nisi quis ligula. Aliquam nec urna vitae ligula eleifend semper. Aliquam sagittis, leo at faucibus posuere, ipsum ipsum posuere justo, ac rhoncus tellus purus eu tellus.</p>
<p>Aenean vulputate lacus efficitur ante tincidunt, eget interdum sem porta. Nullam pellentesque magna ac augue mollis, nec dignissim sem facilisis. Curabitur sollicitudin, arcu a egestas maximus, urna lorem consectetur lorem, vitae luctus nibh odio ac ligula. Nunc fermentum odio quis arcu congue vehicula. Praesent euismod elit id diam tincidunt bibendum. Suspendisse vitae hendrerit elit, id lacinia nibh. Integer ut mauris vestibulum, faucibus sapien id, sodales velit.</p>
<p>In in lacus eu mi condimentum varius non at magna. Sed lacus libero, ultrices et enim at, fringilla ullamcorper lorem. Maecenas consectetur mi a risus bibendum, at iaculis orci accumsan. Integer varius dolor in velit vehicula hendrerit. Fusce lorem nulla, consectetur non faucibus sit amet, dignissim faucibus nibh. In scelerisque id diam dignissim dictum. Mauris vel gravida sapien, sit amet tincidunt leo. In non nunc et magna condimentum tristique. Curabitur ipsum lorem, pulvinar vel imperdiet cursus, rhoncus at purus. Donec eu quam lectus. Duis iaculis neque non ipsum molestie, id tincidunt lectus bibendum. Fusce rhoncus nec tortor vel auctor.</p>
</td>
</tr>
</table>
</body>
</html>
La idea es que algo similar se monte en el editor de texto TinyMCE para tenerlo como plantilla y que los usuarios puedan editar los texto, pero necesito que la columna de la izquierda se adapte al contenido y no me deje tanto espacio lateral.
Como puedo hacerlo ??? Alguna idea ???
Valora esta pregunta
0