2

me estoy volviendo loca intentando centrar el contenido que hay dentro de la tabla, ya que es para mail y la compatibilidad es escasa.

No encuentro ni la forma de centrarlo, ni de hacer que en el numero de cuenta no de un salto de línea.

Gracias!

<table style="max-width:580px;border:1px solid #D9D9D9;border-radius:3px;margin: 0 auto;" cellspacing="0" cellpadding="0" width="100%">
  <tr>
    <td>
      <table style="border-top:1px solid #D9D9D9;padding:40px 25px;display:flex;">
        <tr style="width:47%;border-right:1px solid #D9D9D9;float:left;padding-right:10px;" width="47%" align="left">
          <td>
            <img style="width:40px;min-height:50px;max-height:75px;padding-right:12px;" width="75" height="50" src="#">
          </td>
          <td style="overflow:hidden;font-size:12px;">
            <span>Visita nuestra web</span><br>
            <a style="text-decoration:underline;" href="#">www.tuurl.com/hola...</a>
          </td>
        </tr>
        <tr style="width:47%;float:left;padding-left:10px;" width="47%" align="left">
          <td>
            <img style="width:40px;min-height:50px;max-height:75px;padding-right:12px;" width="75" height="50" src="#">
          </td>
          <td style="overflow:hidden;font-size:12px;">
            <span><a style="text-decoration:underline;" href="#">Lista online</a> o<br> Nº de cuenta 4444-4444-4444-4444</span>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

2
  • Hola, Nina. Respecto a centrar la tabla interior, prueba a agregar dentro del style de <table> el parámetro margin:0 auto; width:90% , tal como lo hiciste en la tabla contenedora, pero dándole un espacio para que se mueva dentro de la misma (al darle un ancho inferior al 100%, a veces se logra el centrado).
    – quinqui
    Commented el 21 mar. 2018 a las 19:07
  • En cuanto al salto de línea, creo que no puedes evitarlo por 2 motivos: el número de cuenta tiene guiones, que por defecto son tomados junto al espacio, como quiebres de línea; y porque le has definido a la celda un ancho de 47%. Si la tabla se encuentra en un espacio más ancho, tal vez ese 47% baste para que el texto no se quiebre... Tocaría quitarle a todas las columnas la definición de ancho, para que se ajusten de manera automática.
    – quinqui
    Commented el 21 mar. 2018 a las 19:09

1 respuesta 1

1

Hay que agregar la etiqueta tbody con el style: margin auto y width 100%, con el width en 100% agrandas el contenedor de las dos columnas y evitas que te corte en número de cuenta y con el margin auto centras las dos table rows en su contenedor. Un saludo!

<table style="max-width:580px;border:1px solid #D9D9D9;border-radius:3px;margin: 0 auto;" cellspacing="0" cellpadding="0" width="100%">
    <tr>
      <td>
        <table style="border-top:1px solid #D9D9D9;padding:40px 25px;display:flex;">
            <tbody style="margin: auto; width: 100%;">
              <tr style="width:47%;border-right:1px solid #D9D9D9;float:left;padding-right:10px;" width="47%" align="left">
                <td>
                  <img style="width:40px;min-height:50px;max-height:75px;padding-right:12px;" width="75" height="50" src="#">
                </td>
                <td style="overflow:hidden;font-size:12px;">
                  <span>Visita nuestra web</span><br>
                  <a style="text-decoration:underline;" href="#">www.tuurl.com/hola...</a>
                </td>
              </tr>
              <tr style="width:47%;float:left;padding-left:10px;" width="47%" align="left">
                <td>
                  <img style="width:40px;min-height:50px;max-height:75px;padding-right:12px;" width="75" height="50" src="#">
                </td>
                <td style="overflow:hidden;font-size:12px;">
                  <span><a style="text-decoration:underline;" href="#">Lista online</a> o<br> Nº de cuenta 4444-4444-4444-4444</span>
                </td>
              </tr>
            </tbody>
        </table>
      </td>
    </tr>
  </table>

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.