0

¿Como puedo alinear dos elementos dentro de un td en xhtml2pdf? Quiero separar las el simbolo del monto

introducir la descripción de la imagen aquí así me gustaría que quedara introducir la descripción de la imagen aquí

probé lo siguiente -> https://stackoverflow.com/questions/15975247/align-two-spans-inside-a-td-one-left-and-one-right pero no me funciona.

<table id="upp">
  <tr>
    <td class="prueba">
      <span>Left</span>
      <span>Right</span>
    </td>
  </tr>
</table>

css

.prueba {
    justify-content: space-between;
    color: #00dd1c;
}
1
  • Te recomendaría que colocaras tu código para que te pudiéramos responder de una mejor manera Commented el 29 oct. 2020 a las 7:50

2 respuestas 2

1

Para lograr un resultado algo así:

introducir la descripción de la imagen aquí

Tu CSS debería ser así:

.prueba {
    width: 100px;
    display: flex; /* Evidentemente debe tener "display: flex" para que la propiedad "justify-content" funcione */
    justify-content: space-between;
}

<table id="upp">
 <tr>
   <td class="prueba">
     <span>$</span>
     <span>4.524</span>
   </td>
 </tr>
</table>

Cabe recalcar, que el <td> (.prueba) debe tener una anchura, es decir que no se adapte a su contenido. También la distancia puede cambiar deacuerdo a la anchura, así que desde ahí, puedes ir modificando la distancia.

Por otra parte, si quieres que el texto este centrado y que el signo $ este alejado, podrías hacer algo así:

.prueba {
    width: 200px;
    text-align: center;

}

.prueba span:first-child {
    margin-right: Xpx;
}

Como puedes ver, hay varias maneras de lograrlo. Espero haberte ayudado.

1
  • Gracias Julio Cesar. Una razón por la cual no me funciona es que xhtml2pdf no toma algunos estilos (xhtml2pdf.readthedocs.io/en/latest/reference.html) Cambie a WeasyPrint y ahora si funciona (probaré la forma que indicas).
    – pepex7
    Commented el 2 nov. 2020 a las 13:40
0

Una razón por la cual no me funciona es que xhtml2pdf no toma algunos estilos (xhtml2pdf.readthedocs.io/en/latest/reference.html) Cambie a WeasyPrint y ahora si funciona.

La solución que explica @Julio Cesar si funciona.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.