Учитывая следующее для шаблона электронной почты:
<style>
@import url("http://fonts.googleapis.com/css?family=Open Sans");
</style>
<div style="width:100%; background:#F2F2F2">
<table style="padding: 25px; margin: 0 auto; font-family:'Open Sans', 'Helvetica', 'Arial';">
<tr align="center" style="margin: 0; padding: 0;">
<td>
<table style="border-style:solid; border-width:2px; border-color: #c3d2d9;" cellspacing="0">
<tr style="background-color: white;">
<td style="width: 700px; padding: 10px 15px 10px 15px; color: #000000;">
<p>Some content here</p>
<span style="font-weight: bold;">My Signature</span><br/>
My Title<br/>
My Company<br/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
Таблица будет точно равна 700px, это то, что необходимо. Однако, поскольку его полностью фиксированная ширина, он не может изменять размер на устройствах с шириной менее 700 пикселей. Но если я изменю элемент td на это:
<td style="max-width: 700px; width: 90%; padding: 10px 15px 10px 15px; color: #000000;">
<p>Some content here</p>
<span style="font-weight: bold;">My Signature</span><br/>
My Title<br/>
My Company<br/>
</td>
Тогда таблица шириной ~ 100 пикселей.
Как бы я изменил порядок CSS, чтобы сделать его таким, чтобы таблица была размером 700 пикселей, но менялась, поскольку размер окна просмотра меньше?