On Outlook Android (v4.2234.3), the !important keyword is added to the inline CSS value of the max-width property to imgs inside tables.
This reduced test case shows that a div's inlined max-width can be overwritten outside or inside a table. Whereas an img's inlined max-width can be overwritten outside of a table, but not inside one.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@media screen and (max-width: 600px) {
.test {
background-color: red;
}
.test, .test img {
width: 100% !important;
max-width: 100% !important;
}
}
</style>
</head>
<body>
<div class="test" style="max-width:200px; margin-bottom:30px;">
<img src="https://placehold.jp/200x200.png" alt="" width="200" style="display:block; width:100%; max-width:200px;">
</div>
<table style="width:100%;">
<tr>
<td>
<div class="test" style="max-width:200px;">
<img src="https://placehold.jp/200x200.png" alt="" width="200" style="display:block; width:100%; max-width:200px;">
</div>
</td>
</tr>
</table>
</body>
</html>This is rendered as:
<div class="test" style="background-color: red; width: 352px; max-width: 200px; color: rgb(33, 33, 33); font-family: -apple-system, HelveticaNeue; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; margin-bottom: 30px;">
<img src="https://placehold.jp/200x200.png" alt="" width="200" tabindex="0" style="border: none; width: 352px; max-width: 200px; display: block; touch-action: auto; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); height: auto !important;">
</div>
<table style="border-spacing: 0px; color: rgb(33, 33, 33); font-family: -apple-system, HelveticaNeue; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; width: 352px;">
<tbody>
<tr>
<td>
<div class="test" style="background-color: red; width: 350px; max-width: 200px;">
<img src="https://placehold.jp/200x200.png" alt="" width="200" tabindex="0" style="border: none; width: 200px; max-width: 200px !important; display: block; touch-action: auto; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); height: auto !important;">
</div>
</td>
</tr>
</tbody>
</table>
On Outlook Android (v4.2234.3), the
!importantkeyword is added to the inline CSS value of themax-widthproperty toimgs insidetables.This reduced test case shows that a
div's inlinedmax-widthcan be overwritten outside or inside atable. Whereas animg's inlinedmax-widthcan be overwritten outside of atable, but not inside one.This is rendered as: