Databases
StackOverflow2013
Postsdbo
POSpanned columns collapsing on Android web-browser (when using auto-fit pages)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSpanned columns collapsing on Android web-browser (when using auto-fit pages)
    text
    copied!<p>Update: I've logged a bug report with Google - <a href="http://code.google.com/p/android/issues/detail?id=22447&amp;can=4&amp;colspec=ID%20Type%20Status%20Owner%20Summary%20Stars" rel="nofollow noreferrer">http://code.google.com/p/android/issues/detail?id=22447&amp;can=4&amp;colspec=ID%20Type%20Status%20Owner%20Summary%20Stars</a></p> <hr> <p>Update: @benni_mac_b points out that the problem goes away if you disable auto-fit pages. This 'solution' works on 2.1 and 2.2 - turns out that the 2.3 phone I was testing on had disabled auto-fit to start with, and when enabled the table breaks again.</p> <p>Guess I'm now looking for a way to tell Android not to auto-fit the table (and override the browser setting). Not liking my chances judging by my Google searches so far.</p> <hr> <p>I've encountered an odd issue with the Android web-browser and spanned columns - for example, if I have this structure:</p> <pre><code>&lt;table class="amhtable"&gt; &lt;col width="16.72%" /&gt; &lt;col width="16.62%" /&gt; &lt;col width="16%" /&gt; &lt;col width="16%" /&gt; &lt;col width="34.67%" /&gt; &lt;thead&gt; &lt;tr class="heading"&gt; &lt;td&gt;Modifying circumstance&lt;/td&gt; &lt;td&gt;Common pathogens&lt;/td&gt; &lt;td&gt;First choice&lt;/td&gt; &lt;td&gt;Alternative&lt;/td&gt; &lt;td&gt;Additional information&lt;/td&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tr class="heading2"&gt; &lt;td colspan="5" width="100%"&gt;SECTION TITLE&lt;/td&gt; &lt;/tr&gt; &lt;tr class="body"&gt; &lt;td&gt;column 1&lt;/td&gt; &lt;td&gt;column 2&lt;/td&gt; &lt;td&gt;column 3&lt;/td&gt; &lt;td&gt;column 4&lt;/td&gt; &lt;td&gt;column 5&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre> <p>The spanned row will reduce to fit the size of the screen, even if the table itself is still wider. This means that the heading2 row's background is missing across most of the table in some cases, making it look quite odd.</p> <p>This is not happening on iPhone, or any desktop browser (Chrome, IE, FF, Safari) that we're aware of - just on Android (multiple devices and versions).</p> <p>The CSS:</p> <pre><code>.amhtable { border-width:1px; border-style:solid; border-color:#000000; border-collapse: collapse; border-spacing: 0; padding: 5px; font-weight: normal; color: #000000; } .amhtable td { border-width:1px; border-style:solid; border-color:black; padding: 3px; } .amhtable th { border-width:1px; border-style:solid; border-color:#777777; background-color:#0084D6; } .amhtable .heading { border-width:1px; border-style:solid; border-color:#000000; background-color:#567ac4; font-weight: bold; font-style: italic; font-family: Verdana, Arial, Helvetica, DejaVu Sans, Bitstream Vera Sans, sans-serif; } .amhtable .heading2 { border-width:1px; border-style:solid; border-color:#000000; background-color:#82a3e7; font-weight: bold; font-family: Verdana, Arial, Helvetica, DejaVu Sans, Bitstream Vera Sans, sans-serif; } </code></pre> <p>So far, I've tried the following:</p> <ul> <li>Removing the <code>&lt;col&gt;</code> elements</li> <li>Adding a sixth column and empty <code>&lt;td&gt;</code> elements into each row</li> <li>Removing the border-collapse style ( after reading <a href="https://stackoverflow.com/questions/3384132/webkit-browsers-rendering-problem-for-table-depending-on-colspan">Webkit Browsers Rendering for Table Depending on colspan</a> )</li> <li>Setting the width of the spanned column to 100% (along with the changes above)</li> <li>Setting a fixed width on the table and setting the spanned column to 100%</li> <li>Replaced the % based widths of the columns with fixed pixel widths</li> <li>Set the position to be relative for the spanned cell (and then the row) and set left and right to 0.</li> <li>Set the position to be relative for the row with left as 0, and width as 1000px</li> <li>Wrapped the table in a 100% wide <code>&lt;div&gt;</code></li> </ul> <p>One thing that we noticed yesterday is that the table should have a 1px black border - but there is a gap on the 2.1/2.2 devices we're testing on where the row doesn't complete. It really does seem to be a rendering problem on these devices.</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