Tengo esta tabla rellena con imágenes:
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"> 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.