2

Estou reproduzindo um pdf:

inserir a descrição da imagem aqui

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.

3
  • O texto fica fora da tabela?
    – Sam
    Commented 12/07/2018 às 19:21
  • dessas que estão desenhadas sim, porém preciso de uma table somente para o texto Commented 12/07/2018 às 19:22
  • Veja se a resposta atende, Se não, iremos pensar noutra forma.
    – Sam
    Commented 12/07/2018 às 20:05

2 Respostas 2

1

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>

0

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .