Spanned columns collapsing on Android web-browser (when using auto-fit pages)

Spanned columns collapsing on Android web-browser (when using auto-fit pages)

Update: I've logged a bug report with Google - http://code.google.com/p/android/issues/detail?id=22447&can=4&colspec=ID%20Type%20Status%20Owner%20Summary%20Stars

---

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.

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.

---

I've encountered an odd issue with the Android web-browser and spanned columns - for example, if I have this structure:

                                      
          
              
Modifying circumstance
              
Common pathogens
              
First choice
              
Alternative
              
Additional information
          
      
        
          
SECTION TITLE
      
        
          
column 1
          
column 2
          
column 3
          
column 4
          
column 5
      
    
  

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.

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

The CSS:

.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;   }  

So far, I've tried the following:

• Removing the elements
• Adding a sixth column and empty elements into each row
• Removing the border-collapse style ( after reading Webkit Browsers Rendering Problem for Table Depending on colspan )
• Setting the width of the spanned column to 100% (along with the changes above)
• Setting a fixed width on the table and setting the spanned column to 100%
• Replaced the % based widths of the columns with fixed pixel widths
• Set the position to be relative for the spanned cell (and then the row) and set left and right to 0.
• Set the position to be relative for the row with left as 0, and width as 1000px
• Wrapped the table in a 100% wide

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.

Answer by Nicolas-Verley for Spanned columns collapsing on Android web-browser (when using auto-fit pages)

Maybe it's a mistake but did you tried to put on your table :

table class="amhtable" **cellspacing="0"**  

Answer by benni_mac_b for Spanned columns collapsing on Android web-browser (when using auto-fit pages)

Is the total width of the columns suppose to be 100.01%?

Try reducing first column to 16.71%?

Answer by dash for Spanned columns collapsing on Android web-browser (when using auto-fit pages)

I wonder if the following will help:

1. Wrap those body rows in a tbody element:

2. Remove the width="100%" from your header row. Colspan="5" should span the width of the table anyway, with the browser sizing accordingly. I wonder if the Google browser is interpreting that literally as the width of the current screen.

3. Add the following to the class for .amhtable:

   float: left;  width: 100%;  

To see if it's a relative sizing bug.

Out of interest, does this happen if the heading row appears anywhere in the table? Or is it just the first time it occurs after thead?

                                      
          
              
Modifying circumstance
              
Common pathogens
              
First choice
              
Alternative
              
Additional information
          
      
        
          
              
SECTION TITLE
          
            
              
column 1
              
column 2
              
column 3
              
column 4
              
column 5
          
   
    
  

What happens if you try that?

Other things you might try are putting the actual heading text in an element like:

      SECTION TITLE    

Answer by Vlad Stratulat for Spanned columns collapsing on Android web-browser (when using auto-fit pages)

I'm not sure, but try this method http://jsfiddle.net/DhAYd/9/

Answer by PointedEars for Spanned columns collapsing on Android web-browser (when using auto-fit pages)

The (X)HTML document in your bug report is not Valid; at best it is incomplete. A DOCTYPE declaration (HTML 4.01, XHTML 1.0) or a doctype (HTML5) is required. In the current HTML5 Working Draft, the col element does not have a width attribute (the W3C Validator says it is obsolete; you should use CSS instead). But this also cannot be Valid HTML or XHTML 1.0, as the title element is missing.

As a result of the missing DOCTYPE declaration, the layout engine is likely going into Quirks Mode, and you cannot expect interoperable behavior.

Also, percentages in (X)HTML are not specified to support decimals, although it is not explicitly forbidden. A HTML syntax validator would not catch this error as %Length is an alias for CDATA (any character data).

You should

1. Validate your document: W3C Validator
2. Make it Valid.
3. See if using integer percentages or CSS helps.

Only if you are still seeing different behavior, you should file a bug.

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72