3

<html>

<head>
  <title>Impressão de Carnê</title>
  <style>
    .vertical {
      transform: rotate(270deg);
      margin-top: 165px;
      display: inline-block;
      border: 1px solid black;
    }
  </style>
  <script type="text/javascript">
  </script>
</head>

<body>
  <form method="POST">
    <div class='vertical'>
      <table border='1' borderColorLight='#000000' cellpadding='2' cellspacing='0'>
        <tr>
          <td colspan="2">
            <p align="left">
              <font face="Verdana" size="2">Loja:</font>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <p align="left">
              <font face="Verdana" size="2">Cliente:</font>
          </td>
        </tr>
        <tr>
          <td>
            <p align="left">
              <font face="Verdana" size="2">Contrato/OS:<br/>Vencimento:</font>
          </td>
          <td>
            <p align="left">
              <font face="Verdana" size="2">Parcela:<br/>Valor:</font>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <p align="left">
              <font face="Verdana" size="2">Recebido Por:_____________________________<br/><br/>Data:________________ Hora:______________</font>
          </td>
        </tr>
      </table>
    </div>




  </form>
</body>

</html>

1 Resposta 1

3

Use transform-origin para controlar o ponto de rotação da tabela em um dos vértices como eu fiz abaixo, no caso eu usei transform-origin: top left;.

O transform-origen default é center, por isso vc precisou usar o margin-top, mas agora é desnecessário e deixei ele comentado

.vertical {
  transform: rotate(270deg) translateX(-100%);
  transform-origin: top left;
  /* margin-top: 165px; */
  display: inline-block;
  border: 1px solid black;
}
<form method="POST">
  <div class='vertical'>
    <table border='1' borderColorLight='#000000' cellpadding='2' cellspacing='0'>
      <tr>
        <td colspan="2">
          <p align="left">
            <font face="Verdana" size="2">Loja:</font>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <p align="left">
            <font face="Verdana" size="2">Cliente:</font>
        </td>
      </tr>
      <tr>
        <td>
          <p align="left">
            <font face="Verdana" size="2">Contrato/OS:<br/>Vencimento:</font>
        </td>
        <td>
          <p align="left">
            <font face="Verdana" size="2">Parcela:<br/>Valor:</font>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <p align="left">
            <font face="Verdana" size="2">Recebido Por:_____________________________<br/><br/>Data:________________ Hora:______________</font>
        </td>
      </tr>
    </table>
  </div>
</form>

1
  • 1
    Entendi, muito obrigado pela explicação.
    – maheusbz
    Commented 10/02/2021 às 20:07

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 .