1

Tengo esta tabla rellena con imágenes: introducir la descripción de la imagen aquí

Y quiero pasarlo a texto, pero no consigo juntar los textos en vertical en 2 líneas.

table {
    color: white;
    background-color: black;
    table-layout: fixed;
    height: 128px;
    width: 400px;
}

.vertAlign {
    writing-mode: vertical-rl;
    transform: rotate(180deg); 
}


.textStyle{
    text-overflow: ellipsis;
    font-size: 11pt;
}

div{
    vertical-align:text-bottom;        
    text-align: center;
    display: flex;
    position: absolute; 
}

.textAlign{
    width: 213.6px;
    vertical-align:bottom;
    text-align:center;
    padding-bottom: 3%;
    font-size: 18pt;
}

.one {
    width: 49.6px;
}
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="headers.css">
    </head>
    <table cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <th class="textAlign">&nbsp;Question</th>
            <th> <div><span class="vertAlign textStyle one">Answers Are Trending</span></div></th>
            <th> <div><span class="vertAlign textStyle two">Average Grade This Store</span></div></th>
            <th> <div><span class="vertAlign textStyle two">Average Grade This District</span></div></th>
            <th> <div><span class="vertAlign textStyle two">Average Grade Company-wide</span></div></th>
        </tr>
    </tbody>
    </table>
</html>

Esto es lo que he conseguido por ahora, pero no consigo juntarlos en 2 líneas ni que aparezcan los puntos suspensivos si no cabe el texto.

El tamaño total de la tabla es 400 x 180. El primer elemento es 213.6 x 128. El segundo 49.6 x 128 y los otros tres 45.6 x 128.

2
  • 1
    Creo que acabo de leerte en forocoches jajaja. Ánimo shur, no es difícil. Dale un par de vueltas. Te doy una pista: Igual te interesa darle una altura concreta al texto, Commented el 24 abr. 2019 a las 14:35
  • Jeje de ahí vengo, buena esa de la altura, va cogiendo forma
    – tsvetos
    Commented el 24 abr. 2019 a las 14:42

1 respuesta 1

2

Hace tiempo use algo similar,

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<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: 0px  ;
         table-layout: fixed;
         width: 69px; 
      }
      th
      {
          border: 1px solid black;
          width: 50px;
          color:white;
          background-color:black;
      }
      td
       {
          border: 1px solid black;
          width: 50px;
    
      }
      .rotated_cell
      {
         height:300px;
         vertical-align:bottom
      }
   </style>

</head>
<body>

   <table border='1'>
      <tr>
        <th> Primer </th>
         <th class='rotated_cell' width="50px">
            <div class='rotate_text'>Renglon Dos</div>
                   
         </th>
         <th class='rotated_cell'>
            <div class='rotate_text'>Tres</div>
         </th>
   
      </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>

Solo adapta algunos cambios y listo

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.