CSS to make table 100% of max-width

Question

Given the following for an email template:

<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> 

The table will be exactly 700px wide is what is needed. However, because its entirely fixed width, it can't resize on devices with less than 700px width. But if I modify the td element to this:

<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> 

Then the table is only ~100px wide.

How would I reorder the CSS to make it so that the table is 700px but resizes as the viewport grows smaller?

Answer 1

You need to use:

table{    width:100%;    table-layout: fixed;    overflow-wrap: break-word; } 

Demo