I'm trying to make responsive email in HTML but i need to put very long table in table, which is a structure. It's not problem to make table responsive with overflow-x: auto, but it's difficult (for me) to make responsive table in table.
Here's codepen: https://codepen.io/Aventadorrre/pen/NWPeWdd
When you remove whole div table-wrapper then it works perfectly with small devices. When i have this table in table it's only scalling.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Simple Transactional Email</title>
<style>
/* -------------------------------------
GLOBAL RESETS
------------------------------------- */
/*All the styling goes here*/
img {
border: none;
-ms-interpolation-mode: bicubic;
max-width: 100%;
}
body {
background-color: #f6f6f6;
font-family: sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 14px;
line-height: 1.4;
margin: 0;
padding: 0;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
table {
border-collapse: separate;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
width: 100%; }
table td {
font-family: sans-serif;
font-size: 14px;
vertical-align: top;
}
/* -------------------------------------
BODY & CONTAINER
------------------------------------- */
.body {
background-color: #f6f6f6;
width: 100%;
}
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
display: block;
margin: 0 auto !important;
/* makes it centered */
max-width: 991px;
padding: 10px;
width: 991px;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
box-sizing: border-box;
display: block;
margin: 0 auto;
max-width: 991px;
padding: 10px;
}
/* -------------------------------------
HEADER, FOOTER, MAIN
------------------------------------- */
.locals {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
.locals td {
text-align: center;
padding: 8px;
}
.locals th {
text-align: center;
padding: 8px;
}
.table-title {
margin-top: 35px;
}
.table-wrapper {
margin-bottom: 30px;
}
.about-wrapper p {
margin-bottom: 15px;
}
.main {
background: #ffffff;
border-radius: 3px;
width: 100%;
}
.wrapper {
box-sizing: border-box;
padding: 20px;
}
.content-block {
padding-bottom: 10px;
padding-top: 10px;
}
.footer {
clear: both;
margin-top: 10px;
text-align: center;
width: 100%;
}
.footer td,
.footer p,
.footer span,
.footer a {
color: #999999;
font-size: 12px;
text-align: center;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,
h2,
h3,
h4 {
color: #000000;
font-family: sans-serif;
font-weight: 400;
line-height: 1.4;
margin: 0;
margin-bottom: 30px;
}
h1 {
font-size: 35px;
font-weight: 300;
text-align: center;
text-transform: capitalize;
}
p,
ul,
ol {
font-family: sans-serif;
font-size: 14px;
font-weight: normal;
margin: 0;
margin-bottom: 15px;
}
p li,
ul li,
ol li {
list-style-position: inside;
margin-left: 5px;
}
a {
color: #3498db;
text-decoration: underline;
}
/* -------------------------------------
BUTTONS
------------------------------------- */
.btn {
box-sizing: border-box;
width: 100%; }
.btn > tbody > tr > td {
padding-bottom: 15px; }
.btn table {
width: auto;
}
.btn table td {
background-color: #ffffff;
border-radius: 5px;
text-align: center;
}
.btn a {
background-color: #ffffff;
border: solid 1px #3498db;
border-radius: 5px;
box-sizing: border-box;
color: #3498db;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: bold;
margin: 0;
padding: 12px 25px;
text-decoration: none;
text-transform: capitalize;
}
.btn-primary table td {
background-color: #3498db;
}
.btn-primary a {
background-color: #3498db;
border-color: #3498db;
color: #ffffff;
}
/* -------------------------------------
OTHER STYLES THAT MIGHT BE USEFUL
------------------------------------- */
.last {
margin-bottom: 0;
}
.first {
margin-top: 0;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
.align-left {
text-align: left;
}
.clear {
clear: both;
}
.mt0 {
margin-top: 0;
}
.mb0 {
margin-bottom: 0;
}
.preheader {
color: transparent;
display: none;
height: 0;
max-height: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
mso-hide: all;
visibility: hidden;
width: 0;
}
.powered-by a {
text-decoration: none;
}
hr {
border: 0;
border-bottom: 1px solid #f6f6f6;
margin: 20px 0;
}
/* -------------------------------------
RESPONSIVE AND MOBILE FRIENDLY STYLES
------------------------------------- */
#media only screen and (max-width: 768px) {
table[class=body] h1 {
font-size: 28px !important;
margin-bottom: 10px !important;
}
table[class=body] p,
table[class=body] ul,
table[class=body] ol,
table[class=body] td,
table[class=body] span,
table[class=body] a {
font-size: 16px !important;
}
table[class=body] .wrapper,
table[class=body] .article {
padding: 10px !important;
}
table[class=body] .content {
padding: 0 !important;
}
table[class=body] .container {
padding: 0 !important;
width: 100% !important;
}
table[class=body] .main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important;
}
table[class=body] .btn table {
width: 100% !important;
}
table[class=body] .btn a {
width: 100% !important;
}
table[class=body] .img-responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important;
}
}
/* -------------------------------------
PRESERVE THESE STYLES IN THE HEAD
------------------------------------- */
#media all {
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.apple-link a {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
.btn-primary table td:hover {
background-color: #34495e !important;
}
.btn-primary a:hover {
background-color: #34495e !important;
border-color: #34495e !important;
}
}
</style>
</head>
<body class="">
<span class="preheader">This is preheader text. Some clients will show this text as a preview.</span>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
<tr>
<td> </td>
<td class="container">
<div class="content">
<!-- START CENTERED WHITE CONTAINER -->
<table role="presentation" class="main">
<!-- START MAIN CONTENT AREA -->
<tr>
<td class="wrapper">
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<p>Szanowni Państwo,</p>
<p>Dziękuję serdecznie za zainteresowanie inwestycją Rezydencja Gubałówka. <br><br>W odpowiedzi na zapytanie, załączam kilka informacji dotyczących inwestycji.</p>
<p>Nasza oferta to:</p>
<ul>
<li>Rentowność do 7% w skali roku od wartości zainwestowanej kwoty</li>
<li>W cenie apartamentu wykończenie pod klucz w bardzo wysokim standardzie</li>
<li>Do 2 tygodni pobytu właścicielskiego w roku</li>
<li>200 m od górnej stacji Polany Szymoszkowej </li>
<li>Umowa najmu na 10 lat</li>
<li>Pierwsza wpłata 20% kolejne wraz z realizacją inwestycji</li>
<li>Planowany termin oddania II kwartał 2022 r.</li>
<li>Możliwość rozliczenia podatku VAT (w tym celu zalecamy kontakt z właściwym Urzędem Skarbowym).</li>
</ul>
<p class="table-title"><strong>Poniżej znajduje się przykładowa oferta lokali od 12 do 39 m.kw.</strong></p>
<div class="table-wrapper" style="overflow-x: auto;">
<table class="locals">
<tr>
<th>Budynek</th>
<th>Kondygnacja</th>
<th>Nr lokalu</th>
<th>Powierzchnia po podłodze [m²]</th>
<th>Pokój [m²]</th>
<th>Łazienka [m²]</th>
<th>Balkon [m²]</th>
<th>Antresola [m²]</th>
<th>Cena m² netto</th>
<th>Cena netto</th>
</tr>
<tr>
<td class="align-center">5</td>
<td class="align-center">-1</td>
<td class="align-center">5A-07</td>
<td class="align-center">12,63</td>
<td class="align-center">10,43</td>
<td class="align-center">2,20</td>
<td class="align-center">-</td>
<td class="align-center">-</td>
<td class="align-center">21 900 zł</td>
<td class="align-center">276 597 zł</td>
</tr>
<tr>
<td class="align-center">5</td>
<td class="align-center">-1</td>
<td class="align-center">5A-07</td>
<td class="align-center">12,63</td>
<td class="align-center">10,43</td>
<td class="align-center">2,20</td>
<td class="align-center">-</td>
<td class="align-center">-</td>
<td class="align-center">21 900 zł</td>
<td class="align-center">276 597 zł</td>
</tr>
</table>
</div>
<div class="about-wrapper">
<p>Do każdego lokalu istnieje możliwość zakupu miejsca postojowego w garażu podziemnym w cenie 50.000 zł netto. Kwota ta zalicza się do kwoty zainwestowanej od której naliczany jest czynsz.</p>
<p>Rezydencja Gubałówka to unikalny na skalę polską obiekt położony w Kościelisku na szczycie góry Gubałówka. Dzięki swojej unikalnej lokalizacji, Rezydencja Gubałówka zyskała szerokie grono klientów ceniących Zakopane za shopping i życie nocne (10 min. od Krupówek), wspaniałą naturę (Rezydencję otaczają łąki i lasy) oraz luksus (w obiekcie znajdą Państwo basen, spa, nagradzaną restaurację oraz bardzo wysoki standard wykończenia). Zapierające wdech w piersiach widoki powodują, że Rezydencję odwiedza coraz więcej turystów ceniących piękno natury i aktywną turystykę bez kompromisu.</p>
<p>Obiekt funkcjonuje od 2017 roku o stale rosnącej popularności (<strong>średnia ocena na domain.com to 9,2</strong>). </p>
<p>Zapraszam do odwiedzenia strony naszego obiektu www.domain.com/, <br> oraz strony naszej inwestycji domain.com</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
</table>
<!-- END CENTERED WHITE CONTAINER -->
<!-- START FOOTER -->
<div class="footer">
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="content-block">
<span class="apple-link">Dział Sprzedaży Rezydencja Gubałówka</span>
</td>
</tr>
</table>
</div>
<!-- END FOOTER -->
</div>
</td>
<td> </td>
</tr>
</table>
</body>
</html>
There are three general ways of tackling responsive tables in HTML emails. Overflow-x will not work across all email clients, so it's not a solution.
Hybrid Column Approach
What you have is:
[head1] [head2] [head3]
[data1] [data2] [data3]
[data4] [data5] [data6]
But what you'll need for mobile responsiveness is a vertical table:
[head1] [data1]
[head2] [data2]
[head3] [data3]
With the second row as another table:
[head1] [data4]
[head2] [data5]
[head3] [data6]
By using the hybrid email approach and hiding the repeated headers by default (for desktop), we can achieve this.
See full write-up with code example for 4 columns here: https://medium.com/#nathankeenmelb/bulletproof-responsive-datatables-in-html-emails-64248b9e18f5
Table as image
You can save the entire table as an image; that way you enable zooming and scrolling for all email clients.
However, it comes with a large drawback in that the data is inaccessible, and requires extensive interaction by the user to read (zooming, constant moving left/right & up/down).
Cards
Does it have to be done as a table? It may be a better approach to group data into a 'card', allowing you to use multiple lines (plus it reads a whole lot better!).
See my write-up here: https://medium.com/#nathankeenmelb/responsive-datatables-through-card-ui-design-for-email-aca6f3c395a2
Related
I'm new to HTML emails and there is an issue I'm struggling with for a couple of days.
I have a two column layout with an image on the left side and some text and a button on the right side.
The issue seems to be the combination of vertical alignment of the column and the alignment of the button itself. The column's alignment can be top, middle, or bottom and the button's alignment can be left, center, or right. If the column's alignment is valign="middle" and the button's alignment is align="left" or align="right", the button overlaps the text. It seems the the issue is on Outlook for Windows as it looks fine on Outlook for Mac.
Here's how it looks on Outlook for Windows-
Here's how it is on Outlook for Mac (this is what I expect on Windows)
Here's the entire email code-
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="x-apple-disable-message-reformatting" />
<meta name="viewport" content=" width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>sdf</title>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG /> <o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<style type="text/css" data-premailer="ignore">
#media screen and (max-width: 600px) {
#-ms-viewport {
width: 320px;
}
}
</style>
<style type="text/css" data-premailer="ignore">
.ExternalClass,
.FullW,
.ReadMsgBody {
width: 100% !important;
}
form td,
form th,
table th {
padding: 0;
}
html,
table th {
margin: 0 !important;
}
html {
padding: 0 !important;
}
button {
display: block !important;
}
div {
display: block;
}
.ExternalClass * {
line-height: 100%;
}
.ExternalClass,
.ExternalClass div,
.ExternalClass font,
.ExternalClass p,
.ExternalClass span,
.ExternalClass td,
.ExternalClass th,
img {
line-height: 100% !important;
}
.ReadMsgBody .ExternalClass a:link,
.ii a,
.yshortcuts {
text-decoration: none !important;
color: transparent !important;
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
table,
td,
th {
mso-table-lspace: 0;
mso-table-rspace: 0;
border-collapse: collapse;
}
a,
blockquote,
body,
li,
p,
span,
table,
td,
th {
-ms-text-size-adjust: 100% !important;
-webkit-text-size-adjust: 100% !important;
}
table th {
vertical-align: top;
font-weight: 400;
}
a img,
img {
border: none !important;
outline: 0 !important;
text-decoration: none !important;
}
img {
-ms-interpolation-mode: bicubic !important;
}
.imgfix {
line-height: 0 !important;
font-size: 0 !important;
}
.imgfix div img,
.imgfix img {
margin: 0 !important;
padding: 0;
}
a {
color: #000;
text-decoration: none;
}
html {
overflow-x: hidden;
}
</style>
<!--[if gte mso 9]>
<style type="text/css" data-premailer="ignore">
.imgfix img {
mso-line-height-rule: exactly;
font-size: 1px;
line-height: 100%;
}
.text .padding,
.button-link td,
.list-item span,
.menu-item span,
.icon-menu-item span {
line-height: 120%;
}
[style*="Lato"],
[style*="Merriweather Sans"],
[style*="Open Sans"],
[style*="Roboto"],
[style*="Source Sans Pro"],
[style*="DM Sans"] {
font-family: Verdana, Geneva, sans-serif !important;
}
[style*="Arvo"],
[style*="Lora"],
[style*="Merriweather"],
[style*="Noticia Text"],
[style*="Playfair Display"] {
font-family: "Times New Roman", Times, serif !important;
}
</style>
<![endif]-->
<style type="text/css" data-premailer="ignore">
::-webkit-scrollbar {
width: 8px;
background-color: rgba(0, 0, 0, 0);
-webkit-border-radius: 100px;
}
::-webkit-scrollbar:hover {
background-color: rgba(0, 0, 0, 0.09);
}
::-webkit-scrollbar-thumb:vertical {
background: rgba(0, 0, 0, 0.5);
-webkit-border-radius: 100px;
}
</style>
<style type="text/css">
#media only screen and (max-width: 600px) {
.m-show-row {
max-height: initial !important;
max-width: 100% !important;
opacity: initial !important;
mso-hide: none !important;
display: table !important;
}
.m-show-row table {
max-height: initial !important;
max-width: 100% !important;
opacity: initial !important;
mso-hide: none !important;
display: table !important;
}
.m-show-row tr {
max-height: initial !important;
max-width: 100% !important;
opacity: initial !important;
mso-hide: none !important;
display: table !important;
}
.m-show-row th {
max-height: initial !important;
max-width: 100% !important;
opacity: initial !important;
mso-hide: none !important;
display: table-cell !important;
}
.m-show-row td {
max-height: initial !important;
max-width: 100% !important;
opacity: initial !important;
mso-hide: none !important;
display: table-cell !important;
}
.m-show-row div {
max-height: initial !important;
max-width: 100% !important;
opacity: initial !important;
mso-hide: none !important;
}
.m-show-row span {
max-height: initial !important;
max-width: 100% !important;
opacity: initial !important;
mso-hide: none !important;
}
.m-show-row img {
max-height: initial !important;
max-width: 100% !important;
opacity: initial !important;
mso-hide: none !important;
}
.m-show-row a {
max-height: initial !important;
max-width: 100% !important;
opacity: initial !important;
mso-hide: none !important;
display: block !important;
}
.m-show-row.regular .column {
display: block !important;
}
.m-show-row .text div {
display: block !important;
}
.m-show-row .text span,
.m-show-row .text a {
display: initial !important;
}
.m-show-row .menu .menu-item.m-hide {
display: none !important;
}
.m-show-row .menu .menu-item.m-show {
display: block !important;
}
.m-show-row .icon-menu .icon-menu-item.m-block,
.m-show-row .icon-menu tr.m-block {
display: block !important;
}
.m-show-row .icon-menu .m-hide {
display: none !important;
}
.menu .menu-items {
display: block !important;
}
.menu .menu-item.m-show {
max-height: initial !important;
max-width: 100% !important;
opacity: initial !important;
mso-hide: none !important;
padding: 10px 0 !important;
}
.menu .menu-item.m-show span,
.menu .menu-item.m-show a,
.menu .menu-item.m-show div {
max-height: initial !important;
max-width: 100% !important;
opacity: initial !important;
mso-hide: none !important;
display: block !important;
}
.icon-menu-item.icon-text span {
display: inline-block !important;
}
.icon-menu img {
max-width: 100% !important;
}
.icon-menu tr.m-show {
max-height: initial !important;
max-width: 100% !important;
opacity: initial !important;
mso-hide: none !important;
}
.icon-menu tr.m-show .icon-menu-item * {
display: block !important;
max-height: initial !important;
max-width: 100% !important;
opacity: initial !important;
mso-hide: none !important;
}
.icon-menu tr.m-show .icon-menu-item,
.icon-menu tr.m-show .icon-menu-item td {
display: inline-block !important;
max-height: initial !important;
max-width: 100% !important;
opacity: initial !important;
mso-hide: none !important;
}
.list {
width: 100% !important;
}
.list table {
width: 100% !important;
}
.list .m-list-item {
display: block !important;
max-height: unset !important;
max-height: initial !important;
max-width: 100% !important;
opacity: initial !important;
mso-hide: none !important;
}
.list .m-list-item span,
.list .m-list-item a,
.list .m-list-item div {
display: table-cell !important;
max-height: initial !important;
max-width: 100% !important;
opacity: initial !important;
mso-hide: none !important;
}
.list .m-list-item .decorator {
padding-right: 3px !important;
}
.m-block,
.m-show {
display: block !important;
}
.m-inline-block {
display: inline-block !important;
}
.m-vertical-spacing {
padding-bottom: 10px !important;
}
.m-table {
display: table !important;
}
.m-inline {
display: inline !important;
}
.m-full-width {
width: 100% !important;
}
.m-half-width {
width: 50% !important;
}
.m-align-center {
text-align: center !important;
}
.body-padding {
padding: 0 !important;
}
.body-text {
max-height: unset !important;
}
tr {
width: 100% !important;
display: table !important;
}
.row {
height: auto !important;
}
table.menu td,
table.menu th {
width: 100% !important;
}
.button-link a {
border-radius: 5px !important;
display: block !important;
padding: 10px 20px !important;
box-sizing: border-box !important;
}
.image img {
max-width: 100% !important;
}
.menu .menu-spacing,
.list .list-type,
.list .list-item,
.m-hide {
display: none !important;
}
}
</style>
</head>
<body
bgcolor="#f2f2f2"
style="
height: 100%;
width: 100%;
margin: 0;
padding: 0;
line-height: 1;
background-color: #f2f2f2;
"
>
<div
align="center"
class="preheader"
style="
font-family: Arial, Helvetica, sans-serif;
color: #303030;
display: none;
font-size: 1px;
line-height: 1px;
max-height: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
mso-hide: all;
"
>
sdf
</div>
<table
class="container m-full-width"
width="100%"
bgcolor="#f2f2f2"
border="0"
cellpadding="0"
cellspacing="0"
title=""
style="
border-spacing: 0;
text-align: center;
height: 100%;
width: 100%;
background-color: #f2f2f2;
"
>
<tbody>
<tr>
<td
class="body-padding"
align="center"
style="text-align: left; font-weight: 400; padding: 20px 0"
>
<table
class="center border m-full-width"
align="center"
border="0"
cellpadding="0"
cellspacing="0"
bgcolor="#ffffff"
style="
border-spacing: 0;
border-collapse: separate;
width: 600px;
background-color: #fff;
border-radius: 0;
"
width="600"
>
<tbody>
<tr>
<td style="text-align: left; font-weight: 400">
<table
class="row regular m-full-width"
border="0"
cellspacing="0"
cellpadding="0"
style="
border-spacing: 0;
text-align: center;
width: 100%;
border: 0;
"
>
<tbody>
<tr>
<td style="text-align: left; font-weight: 400">
<table
class="row table"
border="0"
cellpadding="0"
cellspacing="0"
style="
border-spacing: 0;
text-align: center;
width: 100%;
border: 0;
"
>
<tbody>
<tr class="table" style="width: 100%">
<th
class="column m-full-width m-table m-table"
bgcolor=""
valign="middle"
style="
font-weight: 400;
border-collapse: separate;
text-align: center;
width: 348px;
vertical-align: middle;
"
width="348"
>
<table
class="image"
border="0"
cellspacing="0"
cellpadding="0"
style="border-spacing: 0; width: 100%"
>
<tbody>
<tr>
<td
class="padding"
align="center"
style="
font-weight: 400;
padding: 0;
text-align: center;
"
>
<a
class="imgfix"
target="_blank"
style="
display: block;
text-decoration: none;
"
><img
class="m-inline m-full-width"
border="0"
src="https://images-stage.apsis.cloud/804df07c-3e81-4f8a-8518-182572b51512.jpeg"
alt=""
title=""
width="348"
style="width: 348px"
/></a>
</td>
</tr>
</tbody>
</table>
</th>
<th
class="column m-full-width m-table m-table"
bgcolor=""
valign="middle"
style="
font-weight: 400;
border-collapse: separate;
text-align: center;
width: 252px;
vertical-align: middle;
"
width="252"
>
<table
class="text"
border="0"
cellspacing="0"
cellpadding="0"
style="border-spacing: 0; width: 100%"
>
<tbody>
<tr>
<td
class="padding"
style="
text-align: left;
font-weight: 400;
mso-line-height-rule: exactly;
word-break: break-word;
word-wrap: break-word;
overflow-wrap: break-word;
padding: 20px 20px 20px 20px;
font: 14px/1.4 Arial, Helvetica,
sans-serif;
"
>
A das observantia non est recedendu
vitae dictum. Gallia atilitatis,
obscuris et malesuada fames.
</td>
</tr>
</tbody>
</table>
<table
class="button auto btn-radius"
border="0"
cellpadding="0"
cellspacing="0"
align="left"
style="
border-spacing: 0;
border-collapse: separate;
border-radius: 0;
"
>
<tbody>
<tr style="border-collapse: inherit">
<td
class="padding"
style="
font-weight: 400;
text-align: center;
border-radius: 0;
padding: 0 20px 0 20px;
"
>
<table
class="button-link"
align="left"
border="0"
cellpadding="0"
cellspacing="0"
style="
border-spacing: 0;
border-collapse: separate;
color: #fff;
border-radius: 0;
background: #4a4a4a;
font: bold 14px/1.4 Arial,
Helvetica, sans-serif;
"
>
<tbody>
<tr
style="
border-collapse: inherit;
"
>
<td
style="
font-weight: 400;
text-align: center;
line-height: 1.4;
word-break: break-word;
word-wrap: break-word;
overflow-wrap: break-word;
padding: 10px 10px 10px
10px;
font: bold 14px/1.4 Arial,
Helvetica, sans-serif;
"
>
<!--[if gte mso 9]><a target="_blank" style="color:#ffffff"><span style="font:bold 14px/1.4 Arial, Helvetica, sans-serif;"><[endif]-->button<!--[if gte mso 9]></span></a><[endif]-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I also created a Codepen here.
I'm thinking it may have something to do with the button's align property as it is the same as float:left or float:right which removes the button from normal document flow.
Any help is appreciated.
Anyhow, here's basically all the HTML you'd need for this, taking into account limitations of the different e-mail clients as well (thus only using accepted CSS).
<style>
body{
background-color:#f2f2f2;
}
.tableCenter{
border-collapse:collapse;
margin:auto;
max-width:600px;
background-color:white;
font-family: 'Arial', 'Helvetica', sans-serif;
font-weight:400;
line-height:20px;
font-size:15px;
}
.tableCenter button{
color:white;
padding:10px;
border:none;
font-weight:bold;
background:rgb(128, 128, 128);
}
</style>
<table class='tableCenter'>
<tr>
<td style='width:55%'>
<img src='https://images-stage.apsis.cloud/804df07c-3e81-4f8a-8518-182572b51512.jpeg' width='100%'>
</td>
<td style='width:40%; padding:20px'>
<p>
A das observantia non est recedendu vitae dictum. Gallia atilitatis, obscuris et malesuada fames.
</p>
<button>Button</button>
</td>
</tr>
</table>
I am trying to add a responsive html email to send to the user a link to reset their password. The left padding is not working and I would like it to be responsive like the right side, to have the container always centered.
What line of code is missing inside my inline css for my left padding to perform?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html" />
<title>StackOverflow</title>
<style>
/*
// MARK: Styling
*/
.button {
border-radius: 4px;
font-family: -apple-system-body, BlinkMacSystemFont, sans-serif;
color: white;
padding: 12px 12px;
text-decoration: none;
display: inline-block;
}
.buttonPassword {
margin: auto;
}
#buttonReset {
width: 150px;
margin: auto;
font-family: -apple-system-body, BlinkMacSystemFont, sans-serif;
text-align: center;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: bold;
}
body {
position: relative;
margin: 16;
font-family: -apple-system-body, BlinkMacSystemFont, sans-serif;
}
.container {
display: block;
margin: 16 auto !important;
max-width: 580px;
padding: 10px;
width: 580px;
}
.content {
box-sizing: border-box;
display: block;
margin: 16 auto;
max-width: 580px;
padding: 10px;
}
footer {
width: 100%;
font-family: -apple-system-caption2, BlinkMacSystemFont, sans-serif;
}
header {
margin: auto;
width: 100%;
position: relative;
z-index: 100;
top: 0;
}
html, body {
min-height: 100vh;
display: flex;
flex-direction: column;
margin: 16;
padding: 16;
}
.logo h1 {
font-family: -apple-system-large-title, BlinkMacSystemFont, sans-serif;
display: inline;
}
.logo img {
padding: 16px;
width: 64px;
height: 64px;
vertical-align: middle;
}
p {
font-family: -apple-system-body, BlinkMacSystemFont, sans-serif;
}
.preheader {
color: transparent;
display: none;
height: 0;
max-height: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
mso-hide: all;
visibility: hidden;
width: 0;
}
.right h2 {
font-family: -apple-system-caption2, BlinkMacSystemFont, sans-serif;
text-align: center;
padding: 1em;
}
/*
// MARK: Screen Sizing
*/
#media only screen and (max-width: 620px) {
.logo h1 {
display: inline;
}
.logo img {
padding: 8px;
width: 48px;
height: 48px;
vertical-align: middle;
}
table[class=body] .content {
padding: 0 !important;
}
table[class=body] .container {
padding: 0 !important;
width: 100% !important;
}
}
/*
// MARK: Colors Declaration
// Light Mode
*/
.button {
background-color: #FF9000;
}
#buttonReset {
background-color: #FF9000;
}
.content {
color: #000;
}
header {
background: linear-gradient(#FF9000, #FFA101);
}
.logo h1 {
color: #FFF;
}
.preheader {
color: transparent;
}
.right h2 {
color: #FFF;
}
/*
// Dark Mode
*/
#media (prefers-color-scheme: dark) {
.button {
background-color: #FF9A0A;
}
.content {
color: #FFF;
}
header {
background: linear-gradient(#FF9A0A, #FF9000);
}
.logo h1 {
color: #FFF;
}
.preheader {
color: transparent;
}
.right h2 {
color: #000;
}
}
</style>
</head>
<body>
<span class="preheader">
Email with instructions to reset your password.
</span>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
<tr>
<td> </td>
<td class="container">
<header>
<div class="logo">
<h1><img src="/images/logo.png" alt="logo">StackOverflow</h1>
</div>
</header>
<div id="content">
<br>
<p>
Hello,
<br><br>
A request has been received to change the password for your StackOverlfow account.
<br><br><br>
<p>
<center>
<p>
Click the link below to reset your password.
<p>
</p>
</center>
</p>
</p>
<br>
<div class="buttonPassword">
<center>
<a class="button" href="#(link)">
<strong>Reset password</strong>
</a>
</center>
</div>
<br>
<br>
<p>
The link has a validity of one hour. Ask for a new one after this delay.
<br>
If you did not initiate this request, please contact us immediately at contact#stackoverflow.eu and ignore this
email.
</p>
<br>
<p>
Thank you,
<br>
The StackOverlfow Team
</p>
<br>
</div>
<footer>
<div class="right">
<center>
<p>© 2021 StackOverlfow. All right reserved.</p>
</center>
</div>
</footer>
</td>
<td> </td>
</tr>
</table>
</body>
</html>
Solution 1:
You can make your container centered for every screen and responsive by just changing your container class margin with (0 auto) which centers the div automatically.
.container {
display: block;
margin: 0 auto !important;
max-width: 580px;
padding: 10px;
width: 580px;
}
Watch the final result on my code_pen
Solution 2:
simply add align=center in your table tag.
Add align="center" on table
<table role="presentation" border="0" align="center" cellpadding="0" cellspacing="0" class="body">
https://jsfiddle.net/lalji1051/fgw258dr/
I am working on responsive newsletter using HTML, inline css as much as possible and some css also.
I am facing issue in design as i am not able to remove space between first Image and second table after image..
https://codepen.io/KGuide/full/oNXwyEW
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
background: #fff;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
/* -ms-interpolation-mode:bicubic; */
}
a {
text-decoration: none;
}
.primary{
background: #f5564e;
}
.bg_white{
background: #ffffff;
}
.bg_light{
background: #fafafa;
}
.bg_black{
background: #000000;
}
.bg_dark{
background: rgba(0,0,0,.8);
}
.email-section{
padding:2.5em;
}
/*BUTTON*/
.btn{
padding: 5px 15px;
display: inline-block;
}
.btn.btn-primary{
border-radius: 5px;
background: #f5564e;
color: #ffffff;
}
.btn.btn-white{
border-radius: 5px;
background: #ffffff;
color: #000000;
}
.btn.btn-white-outline{
border-radius: 5px;
background: transparent;
border: 1px solid #fff;
color: #fff;
}
h1,h2,h3,h4,h5,h6{
font-family: 'Nunito Sans', sans-serif;
color: #000000;
margin-top: 0;
}
body{
font-family: 'Nunito Sans', sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 1.8;
color: rgba(0,0,0,.4);
}
a{
color: #f5564e;
}
table{
}
/*LOGO*/
.logo h1{
margin: 0;
}
.logo h1 a{
color: #000;
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
font-family: 'Nunito Sans', sans-serif;
}
.navigation{
padding: 0;
}
.navigation li{
list-style: none;
display: inline-block;;
margin-left: 5px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
}
.navigation li a{
color: rgba(0,0,0,.6);
}
/*HERO*/
.hero{
position: relative;
z-index: 0;
}
.hero .overlay{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: '';
width: 100%;
background: #000000;
z-index: -1;
opacity: .3;
}
.hero .icon{
}
.hero .icon a{
display: block;
width: 60px;
margin: 0 auto;
}
.hero .text{
color: rgba(255,255,255,.8);
padding: 0 4em;
}
.hero .text h2{
color: #ffffff;
font-size: 40px;
margin-bottom: 0;
line-height: 1.2;
font-weight: 900;
}
/*HEADING SECTION*/
.heading-section{
}
.heading-section h2{
color: #000000;
font-size: 24px;
margin-top: 0;
line-height: 1.4;
font-weight: 700;
}
.heading-section .subheading{
margin-bottom: 20px !important;
display: inline-block;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(0,0,0,.4);
position: relative;
}
.heading-section .subheading::after{
position: absolute;
left: 0;
right: 0;
bottom: -10px;
content: '';
width: 100%;
height: 2px;
background: #f5564e;
margin: 0 auto;
}
.heading-section-white{
color: rgba(255,255,255,.8);
}
.heading-section-white h2{
font-family:
line-height: 1;
padding-bottom: 0;
}
.heading-section-white h2{
color: #ffffff;
}
.heading-section-white .subheading{
margin-bottom: 0;
display: inline-block;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(255,255,255,.4);
}
.icon{
text-align: center;
}
.icon img{
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
<meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely -->
<title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700,800,900" rel="stylesheet">
<title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
</head>
<style>
</style>
<body>
<table style="width:100%; text-align:center;">
<tr>
<td style="width:100%; text-align:center; border-spacing: 0px;" >
<table align="center" style="width:100%; max-width:600px;">
<tr>
<td ><img src="https://dummyimage.com/600x400/cf30cf/fff.jpg" alt="" style="width:100%; max-width: 600px;"></td>
</tr>
<tr>
<td class="">
<table style="width:100%; background:#525252; max-width:600px;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding:15px; background:#0A0A0A;"> Move-in now to your dream home in City Center Plaza
</td>
</tr>
<tr>
<td align="center" style="padding:15px; background:#0A0A0A;"> BUTTON </td>
</tr>
<tr>
<td style="padding:15px; background:#0A0A0A;">TEXT TEXT TEXT TEXT TEXT</td>
</tr>
<tr>
<td><img src="https://dummyimage.com/600x400/cf30cf/fff.jpg" alt="" style="width:100%; max-width: 600px;"> </td>
</tr>
<tr>
<td valign="top" align="center" style="padding:15px;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Replace your code with this and see if this works:
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:100%; max-width:600px; border-collapse: collapse;">
<tr>
<td>
<img src="https://dummyimage.com/600x400/cf30cf/fff.jpg" alt="" style="margin: 0; border: 0; padding: 0; display: block; width:100%; max-width: 600px;">
</td>
</tr>
Edit:
Here is 2 tutorials they helped me while creating HTML emails:
Build an HTML Email Template From Scratch
How to Code a Responsive Email from Scratch
As pointed out by the other user, some of that space is coming from the the font size.
What I recommend is using either:
line-height: 0;
or
font-size: 0;
To remove that, and then put all text inside spans to put the size back up.
You also need to remove the padding from your cells,
tr, td {
padding: 0;
}
Complete changes required:
tr, td {
padding: 0;
line-height: 0;
}
span {
line-height: 1;
}
Plus wrap all text in spans.
use "font-size: 0;"
and I think solve your problem
Example:-
<td style="font-size: 0;"><img src="https://dummyimage.com/600x400/cf30cf/fff.jpg" alt="" style="width:100%; max-width: 600px;"></td>
I'm using WickedPDF to convert HTML to PDF and for some reason, even though I thought I had the proper HTML code, my tables still seem to be breaking onto the next page. Mind you, the information that starts in the <td> is actually a nested table, so I'm not sure if this has anything to do with it.
Here's what it looks like in the report:
Here's my CSS code that I'm working with:
<style>
p, ul {
color: #545658;
font-size: 12pt;
font-family: "Arial";
font-weight: 500;
}
* {
font-family: "Arial";
}
h1 {
color: #ED1C24;
font-weight: normal;
font-family: "Arial";
}
th {
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
background-color: black;
color: white;
}
td {
color: #545658;
padding-top: 5px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
}
table.bordered {
border-collapse: collapse;
}
table.bordered td {
border: 1px solid black;
}
table.bordered tr:first-child td {
border-top: 0;
}
table.bordered tr td:first-child {
border-left: 0;
}
table.bordered tr:last-child td {
border-bottom: 0;
}
table.bordered tr td:last-child {
border-right: 0;
}
tr.bordered:nth-child(even) {background-color: #f2f2f2}
img.finding {
position:absolute;
width:60%;
height: 40px;
margin-left: -20px;
max-width: 100%;
z-index:-1;
}
p.finding {
display: inline;
color: white;
font-weight: bold;
font-size: 16pt;
line-height: 1.75em;
}
code {
background-color: #eee;
border: 1px solid #999;
display: block;
padding: 5px;
font-family: "Courier";
font-size: 9.5pt;
color: black;
}
pre {
white-space: pre-wrap; /* Since CSS 2.1 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-break: break-all;
}
table { page-break-inside: auto; width: 100%;}
thead { display: table-row-group; }
tr { page-break-inside: auto; }
</style>
What am I doing wrong that's causing my table to not start until the next page just because its contents is too large for the remainder of the previous page? I thought my tr { page-break-inside: auto; } line would have taken care of this. Is it because I have a nested table perhaps?
This ONLY happens on nested HTML tables. Normal HTML tables start on the same page no matter the length of the content.
Here's an example HTML table:
<html>
<body >
<table border=5 bordercolor=red>
<tr>
<td>
Fisrt Column of Outer Table
</td>
<td>
<table border=5 bordercolor=green>
<tr>
<td>
[lots of data right here]
</td>
</tr>
<tr>
<td>
[lots of data right here]
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I am creating an html calendar(cal.ics) invite and it works in email clients like Gmail, Firefox, and YahooMail. But when I try it in thunderbird, the paragraph(p) tags are always off to the right, even though I've explicity set attributes like align left, float: none, etc. Am I doing something wrong? The email is below, is there something missing in my css?
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Follow-Up! Meeting</title>
<style>
/* -------------------------------------
GLOBAL
------------------------------------- */
* {
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 100%;
line-height: 2.0em;
margin: 0;
padding: 0;
text-align: left;
}
img {
max-width: 600px;
width: 100%;
}
body {
-webkit-font-smoothing: antialiased;
height: 100%;
-webkit-text-size-adjust: none;
width: 100% !important;
}
/* -------------------------------------
ELEMENTS
------------------------------------- */
a {
color: #348eda;
}
.btn-primary {
margin-bottom: 10px;
width: auto !important;
}
.btn-primary td {
background-color: #348eda;
border-radius: 25px;
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 14px;
text-align: center;
vertical-align: top;
}
.btn-primary td a {
background-color: #348eda;
border: solid 1px #348eda;
border-radius: 25px;
border-width: 10px 20px;
display: inline-block;
color: #ffffff;
cursor: pointer;
font-weight: bold;
line-height: 2;
text-decoration: none;
}
.last {
margin-bottom: 0;
}
.first {
margin-top: 0;
}
.padding {
padding: 10px 0;
}
/* -------------------------------------
BODY
------------------------------------- */
table.body-wrap {
padding: 20px;
width: 100%;
}
table.body-wrap .container {
border: 1px solid #f0f0f0;
}
/* -------------------------------------
FOOTER
------------------------------------- */
table.footer-wrap {
clear: both !important;
width: 100%;
}
.footer-wrap .container p {
color: #666666;
font-size: 12px;
}
table.footer-wrap a {
color: #999999;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1, h2, h3 {
color: #111111;
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 200;
line-height: 1.2em;
margin: 40px 0 10px;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 22px;
}
p, ul, ol {
font-size: 14px;
font-weight: normal;
margin: 0;
padding: 0;
margin-bottom: 10px;
float: none;
text-align: left;
}
ul li, ol li {
margin-left: 5px;
list-style-position: inside;
}
/* ---------------------------------------------------
RESPONSIVENESS
------------------------------------------------------ */
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
clear: both !important;
display: block !important;
Margin: 0 auto !important;
max-width: 600px !important;
}
/* Set the padding on the td rather than the div for Outlook compatibility */
.body-wrap .container {
padding: 20px;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
display: block;
margin: 0 auto;
max-width: 600px;
}
/* Let's make sure tables in the content area are 100% wide */
.content table {
width: 100%;
}
</style>
</head>
<body bgcolor="#f6f6f6">
<!-- body -->
<table width="100%" class="body-wrap" bgcolor="#f6f6f6" cellpadding="0" cellspacing="0" border="0">
<tr>
<td></td>
<td class="container" bgcolor="#FFFFFF"><!-- content -->
<div class="content">
<table width="100%" style="width: 100%; text-align: left;" cellpadding="0" cellspacing="0" border="0">
<tr style="width: 100%; text-align: left;" >
<td align="left" style="width: 100%; text-align: left;" >
Hi John Doe,
<p style="text-align: left; margin: 0px; padding: 0px; float: none; display: block;">
You have been invited to attend a meeting.
</p>
<h4>Topic</h4>
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0; text-align:left;" >A Samle Meeting!</p>
<h4>Summmary</h4>
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0; text-align:left;" >
A sample meeting to prove the concept work andthen take it form there
</p>
<h4>Location</h4>
<p>
123 Example Street New york, NY
</p>
<h4>Time</h4>
<p>
From: February 7, 2016, 2:28 am GMT-0500 <br />
To: February 9, 2016, 3:50 pm GMT-0500
</p>
<h4>Next Steps</h4>
<p>
You may view more information on the meeting by clicking the link below
</p><!-- button -->
<table class="btn-primary" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>View Meeting</td>
</tr>
</table><!-- /button -->
<p>
Please adjust your meeting schedule infomration there.
</p>
<p>
Thanks,
</p>
</td>
</tr>
</table>
</div><!-- /content --></td>
<td></td>
</tr>
</table>
<!-- /body -->
<!-- footer -->
<table class="footer-wrap">
<tr>
<td></td>
<td class="container"><!-- content -->
<div class="content">
<table>
<tr>
<td align="center">
</td>
</tr>
</table>
</div><!-- /content --></td>
<td></td>
</tr>
</table>
<!-- /footer -->
</body>
</html>
Tested your email in latest Thunderbird and paragraphs seem to be where they should be.
You may be however referring to the 20px padding set on the "container" with white background. Removing the padding will make the text stick to the left side of white space.
Since both Gmail and Yahoo ignore CSS in HEAD you do not see the padding there.
Personally I would advice against removing the padding for esthetic reason.
Preview in Thunderbird 38.5.1 (Windows)
The problem quite stupid actually. Apparently the spaces in the html were causing the problem.So I changed
<p style="text-align: left; margin: 0px; padding: 0px; float: none; display: block;">
You have been invited to attend a meeting.
</p>
To
<p style="text-align: left; margin: 0px; padding: 0px; float: none; display: block;">You have been invited to attend a meeting</p>
With no space and problem fixed