Databases
StackOverflow2013
Postsdbo
POCSS to make table 100% of max-width
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS to make table 100% of max-width
    text
    copied!<p>Given the following for an email template:</p> <pre><code>&lt;style&gt; @import url("http://fonts.googleapis.com/css?family=Open Sans"); &lt;/style&gt; &lt;div style="width:100%; background:#F2F2F2"&gt; &lt;table style="padding: 25px; margin: 0 auto; font-family:'Open Sans', 'Helvetica', 'Arial';"&gt; &lt;tr align="center" style="margin: 0; padding: 0;"&gt; &lt;td&gt; &lt;table style="border-style:solid; border-width:2px; border-color: #c3d2d9;" cellspacing="0"&gt; &lt;tr style="background-color: white;"&gt; &lt;td style="width: 700px; padding: 10px 15px 10px 15px; color: #000000;"&gt; &lt;p&gt;Some content here&lt;/p&gt; &lt;span style="font-weight: bold;"&gt;My Signature&lt;/span&gt;&lt;br/&gt; My Title&lt;br/&gt; My Company&lt;br/&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; </code></pre> <p>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:</p> <pre><code>&lt;td style="max-width: 700px; width: 90%; padding: 10px 15px 10px 15px; color: #000000;"&gt; &lt;p&gt;Some content here&lt;/p&gt; &lt;span style="font-weight: bold;"&gt;My Signature&lt;/span&gt;&lt;br/&gt; My Title&lt;br/&gt; My Company&lt;br/&gt; &lt;/td&gt; </code></pre> <p>Then the table is only ~100px wide.</p> <p>How would I reorder the CSS to make it so that the table is 700px but resizes as the viewport grows smaller?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload