Question posted in 
How can I limit the height of a table cell for an email in the Outlook desktop app?
It displays well in the browser.
In the Outlook desktop app, all the text by the identifier #some-text increases the length of the cell.
DEMO: https://jsfiddle.net/ArtfulLee/zxg6msyt/
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 4.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office" lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Template</title>
<style type="text/css">
table {
border-spacing: 0;
mso-cellspacing: 0;
mso-padding-alt: 0;
}
td {
padding: 0;
}
a {
text-decoration: none;
}
</style>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse !important;}
</style>
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body style="Margin:0;padding:0;min-width:100%;background-color:#e5e5e5;">
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
body {background-color: #e5e5e5!important;}
body, table, td, p, a {font-family: sans-serif, Arial, Helvetica!important;}
</style>
<![endif]-->
<center style="width: 100%;table-layout:fixed;background-color: #e5e5e5;padding-top: 40px;padding-bottom: 40px;">
<div style="max-width: 800px;background-color: #006c5e;">
<!-- <div
style="font-size: 0px;line-height: 1px;mso-line-height-rule:exactly;display: none;max-width: 0px;max-height: 0px;opacity: 0;overflow: hidden;mso-hide:all;">
Start
</div> -->
<!--[if (gte mso 9)|(IE)]>
<table width="800" align="center" border="0" cellspacing="0" cellpadding="0" role="presentation" style="color:#1C1E23;">
<tr>
<td>
<![endif]-->
<table align="center" border="0" cellspacing="0" cellpadding="0" role="presentation"
style="color:#111111; font-family: Arial, Helvetica, sans-serif; background-color: #006c5e; Margin:0; padding:0; width: 100%; max-width: 800px;">
<tr>
<td>
<!-- Main Message -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation"
style="Margin: 0; padding: 0; border-collapse: collapse;">
<tr>
<td style="padding: 40px 40px 40px 40px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0"
style="Margin: 0; padding: 0; border-collapse: collapse;">
<tr>
<td>
<!-- header of list -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td
style="font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: 700; line-height: 31.2px; color: #FFFFFF;word-break: break-word; padding: 24px 0 24px 0;">
Lorem ipsum dolor sit amet:
</td>
</tr>
</table>
<!-- End header of list -->
<!-- template -->
<table width="100%" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td style="padding: 0 0 24px 0;">
<a href="#" style="text-decoration: none;">
<table width="100%" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td style="background-color: #FFFFFF;">
<table width=" 100%" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td width="212"
style="max-width: 212px; padding: 12px 12px 12px 12px;">
<img width="212" height="157"
src="#"
alt="photo"
style="display: block; object-fit: cover;">
</td>
<td
style="vertical-align: top; padding: 12px 12px 12px 12px; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; font-weight: 400;line-height: 140%; color: #333333; ">
<div
style="height: 157px; overflow-y: hidden;">
<p
style="Margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-weight: 700; line-height: 28.8px; color: #006c5e;">
Lorem ipsum dolor sit amet.
</p>
<p id="some-text">Lorem ipsum dolor, sit amet
consectetur adipisicing
elit. Cupiditate accusantium
et voluptatibus ullam, fuga
optio beatae officia aliquam
aperiam in sint veritatis
dolorum error quae minima
iste. Explicabo dolorum
temporibus laudantium fugiat
ducimus reprehenderit
provident beatae dolorem,
repellat ad esse in cumque!
Quibusdam minus possimus
assumenda, iste ea dolore
veniam at ipsam iusto
molestias, veritatis
maiores? Iusto, tempore rem
perferendis deserunt quis
cum dolor quo sit omnis?
Eaque ea incidunt
voluptatibus nihil
architecto dolores rem
facilis omnis tempora ab
optio accusamus aperiam, cum
corporis dolorem beatae nemo
quidem tempore? Fugit
quisquam nobis vero quo
atque consequatur maxime,
sunt non, impedit quia
possimus magnam ab illo nemo
vitae ipsum. Eligendi at
ipsa id iste beatae. Quidem
nemo enim similique ex,
repellat omnis debitis nisi
ipsam fugit iusto incidunt
unde magnam, voluptate animi
veniam dolorum consectetur
doloribus sapiente eaque
eum. Cum quia facilis atque
earum perspiciatis aperiam
eos, alias et ullam
officiis?</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</a>
</td>
</tr>
</table>
<!-- End Template -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End Main message -->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</div>
</center>
</body>
</html>
I tried classes, specifying the height in the class, and inline style.
I also tried to set the height for the table elements.
<table width="800" border="0" cellspasing="0" cellpadding="0" style="table-layout: fixed; margin: 0; padding: 0; border-collapse: collapse; ">
<tr>
<td style="position: relative; max-height: 157px; height: 157px; overflow-y: hidden;">
<div style="position: absolute; display: block; max-height: 157px; height: 157px; overflow-y: hidden;">
</div>
</td>
</tr>
</table>
2
Answers
You can try to use the following methods for limiting the height of the table cell in outlook.
#some-textand use the CSS property overflow to hide or scroll the extra content.<td style="height: 100px; overflow: hidden;">...</td>or you can use
<td style="height: 100px; overflow: scroll;">...</td>You can use min-height and max-height properties to define an absolute height for the table cell. Just keep in mind that support for these in Outlook is limited and might not work as you might expect them to.
You can use a nested table. Place the content inside a nested table with a fixed height to constrain the content within that height.
Conditional Comments: Use Microsoft Outlook conditional comments to apply styles specifically for Outlook.
You could also use Outlook’s Conditional comments to apply styles to the emails. Like this:
You can replace the content with an image, meaning if the content is not dynamic, you can put an image inside the table cell to represent the content, since images do not expand the cell height.
Try to remember that Outlook’s rendering engine can be quite different from web browsers, and it’s known to have limited CSS support. Testing across different versions of Outlook is crucial to ensure compatibility. Additionally, you can use tools like Litmus or Email on Acid to preview how your email will look in various email clients, including different versions of Outlook.
Tables are designed to expand to the height needed to fit the content. That’s why to limit it for everything else, you need the div.
For Outlook, you can use VML. It does change that portion into an image, however, so you lose out certain functions like the ability to copy the text, or with accessibility (screenreaders will not be able to read the text).
This has been tested in Outlook desktop and Gmail webmail: