Estoy intentando hacer una simple plantilla para un correo, por lo que estoy usando tablas en HTML.
Pero no entiendo porque en la ultima fila, las celdas no se mantienen dentro de la fila, se supone que el ancho de la fila no debería exceder el ancho de la tabla, pero si se fijan, las celdas se exceden y salen fuera de la tabla incluso. estoy dando un ancho fijo a cada celda que no excedan el 100% entre las 3 celdas y aún así se desborda. No entiendo por que sucede eso, acá está el código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://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">
body {
margin: 0;
padding: 0;
min-width: 100% !important;
}
.content {
width: 100%;
max-width: 600px;
margin-top: 40px;
table-layout: fixed;
}
.text-center {
text-align: center;
}
</style>
</head>
<body>
<table class="content" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="text-center" width="100%">
XxxxxX
</td>
</tr>
<tr>
<td class="text-center" style="padding: 100px 15px 0px 15px" width="100%">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, eum libero delectus dolorem ad quam aperiam quos explicabo saepe autem commodi! Quia recusandae, inventore illo? Voluptatibus, eligendi! Ducimus obcaecati, perferendis?
</td>
</tr>
<tr>
<td class="text-center" style="padding-top: 30px;" width="100%">
Lorem ipsum dolor sit amet consectetur
</td>
</tr>
<tr>
<td style="padding-left: 20px;" width="100%">
<ul>
<li>Lorem ipsum, dolor sit amet, consectetur </li>
<li>sit repellendus eaque quisquam quaerat vero.</li>
</ul>
</td>
</tr>
<tr>
<td style="padding-top: 100px;" width="100%">
<hr>
</td>
</tr>
<tr>
<td style="width: 30%;">
XxxxxxxX<br><br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro ipsam tempora nihil magnam consequatur perferendis commodi explicabo sapiente quidem nulla nobis odio dignissimos incidunt illo dolores expedita, neque corporis corrupti?
</td>
<td style="width: 30%;">
1111111 <br><br>
22222222<br>
33333333333333333
</td>
<td style="width: 30%;">
Enlaces Útiles <br><br>
<a href="">Xxxxxx</a> <br>
<a href="">yyyyyy</a> <br>
<a href="">Zzzzzzz</a> <br>
</td>
</tr>
</table>
</body>
</html>