2
I’m playing a pdf:
However, I need to place this vertical text which is in the image,I wanted to know how to leave it upright, in the same format as the image using table only, and not use div.
2 answers
1
I’ll give you an option that’s not exactly "inside" the table, but it’s a pseudo-elemento table. What I mean is an element built in the CSS, but which is linked in the table.
My intention with this answer is not to depend on you for the size and construction of the table, so you don’t have to depend on setting any rowspan="n" or anything.
I used an attribute custom data-texto=" " 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) only by a detail in breaking the row if the table is too small. With RL the line breaks in and gets better reading
To better understand 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>0
See this example, 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 >
<tr style="height:100px">
<td class='rotate'>valor rotacionado </td>
</tr>
</table>Browser other questions tagged html table
You are not signed in. Login or sign up in order to post.
Text is outside the table?
– Sam
of those that are drawn yes, but I need a table only for the text
– Victor Gabriel
See if the answer answers, otherwise we’ll think of another way.
– Sam