Estou reproduzindo um pdf:
Porém, preciso colocar este texto vertical o qual esta na imagem,queria saber como deixar na vertical, no mesmo formato da imagem apenas utilizando table, e não utilizar div.
Estou reproduzindo um pdf:
Porém, preciso colocar este texto vertical o qual esta na imagem,queria saber como deixar na vertical, no mesmo formato da imagem apenas utilizando table, e não utilizar div.
Vou dar uma opção que não é exatamente "dentro" da tabela, mas é um pseudo-elemento
da tabela. O que eu quero dizer que é um elemento construído no CSS, mas que está vinculado na tabela.
A minha intensão com essa resposta é não depender em si do tamanho e da construção da tabela, assim não precisar depender de configurar algum rowspan="n"
nem nada.
Eu usei um atributo custom data-texto=" "
para colocar o texto que vai aparecer ao lado da tabela no pseudo-elemento ::after
Também optei por usar vertical-RL
(right to left) e não LR
(left to right) apenas por um detalhe na quebra da linha caso a tabela seja muito pequena. Com RL
a linha quebra para dentro e fica melhor a leitura
Para entender melhor veja o código.
table {
position: relative;
width: calc(100% - 2.4rem);
}
table::after {
content: attr(data-texto);
position: absolute;
height: 100%;
right: -2.4rem;
text-align: center;
writing-mode: vertical-rl;
}
table:nth-of-type(2)::after {
writing-mode: vertical-lr;
}
<table border="1" data-texto="Essa frase quebra certo para RL vai pra dentro">
<tbody>
<tr>
<td>item 01</td>
<td>item 02</td>
<td>item 03</td>
<td>item 01</td>
<td>item 02</td>
<td>item 03</td>
</tr>
<tr>
<td>item 01</td>
<td>item 02</td>
<td>item 03</td>
<td>item 01</td>
<td>item 02</td>
<td>item 03</td>
</tr>
<tr>
<td>item 01</td>
<td>item 02</td>
<td>item 03</td>
<td>item 01</td>
<td>item 02</td>
<td>item 03</td>
</tr>
<tr>
<td>item 01</td>
<td>item 02</td>
<td>item 03</td>
<td>item 01</td>
<td>item 02</td>
<td>item 03</td>
</tr>
<tr>
<td>item 01</td>
<td>item 02</td>
<td>item 03</td>
<td>item 01</td>
<td>item 02</td>
<td>item 03</td>
</tr>
<tr>
<td>item 01</td>
<td>item 02</td>
<td>item 03</td>
<td>item 01</td>
<td>item 02</td>
<td>item 03</td>
</tr>
<tr>
<td>item 01</td>
<td>item 02</td>
<td>item 03</td>
<td>item 01</td>
<td>item 02</td>
<td>item 03</td>
</tr>
<tr>
<td>item 01</td>
<td>item 02</td>
<td>item 03</td>
<td>item 01</td>
<td>item 02</td>
<td>item 03</td>
</tr>
</tbody>
</table>
<br><br>
<table border="1" data-texto="Essa frase quebra Errado! LR vai pra fora">
<tbody>
<tr>
<td>item 01</td>
<td>item 02</td>
<td>item 03</td>
<td>item 01</td>
<td>item 02</td>
<td>item 03</td>
</tr>
<tr>
<td>item 01</td>
<td>item 02</td>
<td>item 03</td>
<td>item 01</td>
<td>item 02</td>
<td>item 03</td>
</tr>
<tr>
<td>item 01</td>
<td>item 02</td>
<td>item 03</td>
<td>item 01</td>
<td>item 02</td>
<td>item 03</td>
</tr>
<tr>
<td>item 01</td>
<td>item 02</td>
<td>item 03</td>
<td>item 01</td>
<td>item 02</td>
<td>item 03</td>
</tr>
</tr>
<tr>
<td>item 01</td>
<td>item 02</td>
<td>item 03</td>
<td>item 01</td>
<td>item 02</td>
<td>item 03</td>
</tr>
<tr>
<td>item 01</td>
<td>item 02</td>
<td>item 03</td>
<td>item 01</td>
<td>item 02</td>
<td>item 03</td>
</tr>
<tr>
<td>item 01</td>
<td>item 02</td>
<td>item 03</td>
<td>item 01</td>
<td>item 02</td>
<td>item 03</td>
</tr>
<tr>
<td>item 01</td>
<td>item 02</td>
<td>item 03</td>
<td>item 01</td>
<td>item 02</td>
<td>item 03</td>
</tr>
<tr>
<td>item 01</td>
<td>item 02</td>
<td>item 03</td>
<td>item 01</td>
<td>item 02</td>
<td>item 03</td>
</tr>
<tr>
<td>item 01</td>
<td>item 02</td>
<td>item 03</td>
<td>item 01</td>
<td>item 02</td>
<td>item 03</td>
</tr>
</tbody>
</table>
Veja esse exemplo, apresentado na seguinte questão: stackoverflow
$(document).ready(function() {
$('.rotate').css('height', $('.rotate').width());
});
td {
border-collapse: collapse;
border: 1px black solid;
}
tr:nth-of-type(5) td:nth-of-type(1) {
visibility: hidden;
}
.rotate {
/* FF3.5+ */
-moz-transform: rotate(-90.0deg);
/* Opera 10.5 */
-o-transform: rotate(-90.0deg);
/* Saf3.1+, Chrome */
-webkit-transform: rotate(-90.0deg);
/* IE6,IE7 */
filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.083);
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
/* Standard */
transform: rotate(-90.0deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table >
<tr style="height:100px">
<td class='rotate'>valor rotacionado </td>
</tr>
</table>