Webdesign: Wrapping table suppresses scrollbars in IE 11 and Firefox <p>We have to get a legacy web application to run in Internet Explorer 11 and Firefox. The application does not set any doctype and therefore sends both browsers into quirks mode.</p> <p>We have a table that needs to be scrollable, which is embedded in a div with overflow: auto. This works on its own, but our web application embeds this div again in a table and wraps the table with another two divs. See the fiddle here:</p> <p><a href="https://jsfiddle.net/Tim_van_Beek/y7hsp1zp/3/" rel="nofollow">https://jsfiddle.net/Tim_van_Beek/y7hsp1zp/3/</a></p> <p>(Please use IE 11 or Firefox, the page does not work in Chrome at all.)</p> <p>The wrapping table (the first -node in the HTML tree) seems to suppress the scrollbars. They reappear when one removes it. So while this structure does not have scrollbars (see fiddle above): </p> <pre><code>&lt;div style="overflow: hidden;..."&gt; &lt;div ...&gt; &lt;table width="auto" height="auto" cellspacing="0" cellpadding="0"&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td width="100%" height="100%" align="left" valign="top"&gt; &lt;div style="overflow: auto;"&gt; ...table data to be scrolled </code></pre> <p>...this one does (remove the table, tbody, tr and td tags):</p> <pre><code>&lt;div style="overflow: hidden;..."&gt; &lt;div ...&gt; &lt;div style="overflow: auto;"&gt; ...table data to be scrolled </code></pre> <p>It would seem that one needs to format the table in a certain way to get it to display scrollbars again (or rather: not suppress the scrollbars of its child node), any suggestions? </p> <p>We cannot simply remove the table from our application without compromising the rest of the layout, but we can add/modify css at will.</p>