2

Necesito rotar las celdas de una tabla pero que su contenido no rote junto con ellas.

He intentado usar lo siguiente:

#rotate{
     -moz-transform: rotate(-45.0deg);  /* FF3.5+ */
       -o-transform: rotate(-45.0deg);  /* Opera 10.5 */
  -webkit-transform: rotate(-45.0deg);  /* Saf3.1+, Chrome */
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Registrar Usuario</title>
</head>
<body>

<table   border="1px">

  <tr>

    <td id="rotate">Celda</td>

    <td id="rotate">Celda 2</td>

    <td id="rotate">Celda 3</td>

  </tr>

  <tr>

    <td id="rotate">Celda 4</td>

    <td id="rotate">Celda 5</td>

    <td id="rotate">Celda 6</td>

  </tr>

</table>
</body>

Pero lo que hace es rotar las celdas de la tabla junto con su contenido, lo que me gustaría es girar las celdas pero mantener el contenido con su orientación normal.

Espero me puedan ayudar o decirme si esto es posible o no.

Gracias!

2
  • Podrias compartir tu codigo completo de la tabla que intentas rotar? Commented el 26 ago. 2020 a las 15:16
  • Listo, ya agregué el codigo básico que eztoy usando para probar las propiedades "transform" Commented el 26 ago. 2020 a las 15:23

1 respuesta 1

3
Agrega un ejemplo o más código si esto no fue util

Puedes manipular el estilo de la celda y de forma independiente el elemento dentro de esta de la siguiente manera

.egt tr td{
    border: 1px #000 solid;
    -webkit-transform: rotate(15deg) ;
  -moz-transform: rotate(15deg) ;
    -ms-transform: rotate(15deg);
}
.egt tr td span{
    display:block;
    -webkit-transform: rotate(-15deg) ;
  -moz-transform: rotate(-15deg) ;
   -ms-transform: rotate(-15deg);
}
<table class="egt">
  <tr>
        <td><span>Celda 1</span></td>
    <td><span>Celda 2</span></td>
    <td><span>Celda 3</span></td>
  </tr>
  <tr>
    <td><span>Celda 4</span></td>
    <td><span>Celda 5</span></td>
    <td><span>Celda 6</span></td>
  </tr>
</table>

1
  • 1
    Gracias! es justo lo que necesitaba Commented el 26 ago. 2020 a las 15:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.