Tabela alterar largura de acordo com tamanho do texto!

Leonardo Dias_131708 · Maio 20, 2014

Fala galera,

Ps: Escrevi largura errado no título do tópico, o problema está ocorrendo na altura!

Estou com um "problema" que nunca tinha me acontecido antes,

Montei um email marketing em HTML e em momento nenhum defini tamanho de altura das colunas internas, ou seja, a altura deveria fixar de acordo com o tamanho do texto.

Porem quando meu cliente joga o código html no outlook, e muda o tamanho do texto visualmente as tabelas não corrigem o tamanho, até mesmo mudando visualmente pelo inspetor de elementos do Chrome da o mesmo "erro".

Como devo fazer para que a tabela acompanhe o tamanho do texto quando trocado visualmente?!

Segue abaixo uma imagem do "erro" quando edito pelo inspetor de elementos do Chrome:

Segue também o código que ultilizei no email marketing:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.subtitulo {
	font-weight: bold;
}
.subtitulo {
	font-weight: bold;
}
.subtitulo {
	font-weight: bold;
}
.subtitulo {
	font-weight: bold;
}
.subtitulo {
	font-weight: bold;
	color: #808285;
	font-family: Trebuchet MS;
	font-size: 24px;
}
.conteudo {
	color: #808285;
	font-family: Trebuchet MS;
}
</style>
</head>

<body>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
  
  <tr><td colspan="5" width="600" height="30" bgcolor="#EBEBEB"> </td></tr>
  
  <tr>
  <td width="40" bgcolor="#EBEBEB"> </td>
    <td colspan="3" bgcolor="#EBEBEB"><span style="font-size:26px; font-family:Trebuchet MS; color:#b21a29;">
                        Lorem Ipsum is simply dummy text of the printing, but also the leap into electronic typesetting, remaining essentially.
                    	</span></td>
                        <td width="40" bgcolor="#EBEBEB"> </td>
  </tr>
  <tr><td colspan="5" width="600" height="30" bgcolor="#EBEBEB"> </td></tr>
  <tr>
    <td width="40" bgcolor="#EBEBEB"> </td>
    <td width="240"  height="auto" bgcolor="#d1d3d4" style="padding: 20px;" >
      <span class="subtitulo" style="font-weight: bold;	color: #808285;	font-family: Trebuchet MS; font-size: 24px;">MERCADO</span><br />
        <span class="conteudo" style="color: #808285; font-family: Trebuchet MS;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</span></td>
    <td width="40" bgcolor="#EBEBEB"> </td>
    <td width="240" bgcolor="#d1d3d4" style="padding:20px;">
      <span class="subtitulo" style="font-weight: bold;	color: #808285;	font-family: Trebuchet MS; font-size: 24px;">CANAIS</span><br />
        <span class="conteudo" style="color: #808285; font-family: Trebuchet MS;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged..</span></td>
    <td width="40" bgcolor="#EBEBEB"> </td>
  </tr>
  <tr>
    <td colspan="5" bgcolor="#EBEBEB"> </td>
  </tr>
  <tr>
    <td width="40" bgcolor="#EBEBEB"> </td>
    <td width="240" bgcolor="#d1d3d4" style="padding:20px;">
      <span class="subtitulo" style="font-weight: bold;	color: #808285;	font-family: Trebuchet MS; font-size: 24px;">PRODUTO</span><br />
        <span class="conteudo" style="color: #808285; font-family: Trebuchet MS;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span></td>
    <td width="40" bgcolor="#EBEBEB"> </td>
    <td width="240" bgcolor="#d1d3d4" style="padding:20px;">
      <span class="subtitulo" style="font-weight: bold;	color: #808285;	font-family: Trebuchet MS; font-size: 24px;">CONSUMIDOR</span><br />
        <span class="conteudo" style="color: #808285; font-family: Trebuchet MS;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span>
    </td>
    <td width="40" bgcolor="#EBEBEB"> </td>
  </tr>
  <tr>
    <td colspan="5" bgcolor="#EBEBEB"> </td>
  </tr>
  <tr>
    <td width="40" bgcolor="#EBEBEB"> </td>
    <td colspan="3" bgcolor="#d1d3d4" style="padding:20px;">
      <span class="subtitulo" style="font-weight: bold;	color: #808285;	font-family: Trebuchet MS; font-size: 24px;">SESSÃO EXTRA</span><br />
        <span class="conteudo" style="color: #808285; font-family: Trebuchet MS;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span>
    </td>
    <td width="40" bgcolor="#EBEBEB"> </td>
  </tr>
  <tr>
    <td colspan="5" bgcolor="#EBEBEB"> </td>
  </tr>

</table>
</body>
</html>

Abraços,
Léo

xanburzum · Maio 20, 2014

no CSS defina

margin-left: auto;
margin-right: auto;

e também pode colocar a tabela dentro de uma DIV e deixar sua DIV auto-ajustável

Leonardo Dias_131708 · Maio 20, 2014

no CSS defina

margin-left: auto;

margin-right: auto;

e também pode colocar a tabela dentro de uma DIV e deixar sua DIV auto-ajustável

Eu tenho que colocar esse margin dentro do style da coluna que quero trabalhar? Dessa forma?

<td width="240" valign="top" bgcolor="#d1d3d4" style="padding: 20px; margin-left:auto; margin-right:auto;" >

Não resolveu. Só pra ressaltar estou com problema na altura da coluna, que quando edito o texto visualmente não acompanha o novo tamanho do texto, escrevi largura por engano no título do tópico.

Ai acontece o erro da imagem, que o texto diminui, mas a coluna (<td>) continua do mesmo tamanho.

E como estou trabalhando com e-mail marketing, não sei se seria apropriado resolver isso com uma <div>, pois pode ter aqueles programas de e-mail colossais que não vão carregá-las.

Eu tentei deixar a coluna com height="100%", mas também não resolveu.

abraços,

Léo

xanburzum · Maio 20, 2014

tenta este exemplo:

<html>
<head>
        <title>Anonymous</title>
        <link href="style.css" type="text/css" rel="stylesheet"/>
        </head>
<body>
<table id="tabela1" align="center">
                        <table border="1" width="1000" align="center">
                                <tr>
                                        <td><img src="imgs/top-banner.jpg"></td>
                                </tr>  
                        </table>
                       
                        <table border="1" align="center" width="1000">
                                <tr><td style="max-width: 192px;"><img src="imgs/menu1.png"></td>
                                        <td style="max-width: 193px;"><img src="imgs/principal.png"></td>
                                        <td style="max-width: 194px;"><img src="imgs/principal.png"></td>
                                        <td style="max-width: 196px;"><img src="imgs/principal.png"></td>
                                        <td style="max-width: 197px;"><img src="imgs/principal.png"></td>
                                        </tr>
                        </table>

                <table border="1" height="400" width="1000" align="center">
                        <tr>
                                <td id="tdp" align="center">2</td>
                                <td id="tdp1"align="center">1</td>
                                <td id="tdp" align="center">3</td>
                        </tr>
                </table>
</table>
</body>
</html>

CSS:

#tabela1{
        border: 1px solid;
        width: 1010;
        margin-left: auto;
margin-right: auto;
}
#tdp{
        border: 1px solid;
        margin-left: auto;
margin-right: auto;
}
#tdp1{
        border: 1px solid;
        margin-left: auto;
margin-right: auto;
}
body{
        background-color:#000000;
}

e ajuste o tamanho das imagens, senão vão ficar todas cortadas devido ao max-width.

Entrar

Arquivado

Tabela alterar largura de acordo com tamanho do texto!

Recommended Posts

Leonardo Dias_131708 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

Leonardo Dias_131708 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Adicionar Registro Plano de Contas

Javascript - Passar Parâmetros para uma Função.

PHP - Consulta MySql para prazo de dias

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante