I am reproducing a pdf:
But I need to put this vertical text which is in the image, I wanted to know how to leave it vertically, in the same image format only using table, and not use div.
Vertical text in table
2
asked by anonymous 12.07.2018 / 21:18
2 answers
0
See this example, which is presented in the following question: 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><trstyle="height:100px">
<td class='rotate'>valor rotacionado </td>
</tr>
</table>
12.07.2018 / 21:49
0
I will give an option that is not exactly "inside" the table, but is a pseudo-elemento of the table. What I mean is that an element built in CSS, but that is bound in the table.
My intent with this answer is to not depend on the size and construction of the table, so you do not need to depend on setting some rowspan="n" or anything.
I used a custom data-texto=" " attribute to place the text that will appear next to the table in the pseudo-element ::after
I also chose to use vertical-RL (right to left) and not LR (left to right) just for a detail in the line break if the table be very small. With RL the line breaks in and gets better reading
To understand better see the code.
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>
12.07.2018 / 23:13