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

Question

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:

<table class="amhtable">
    <col width="16.72%" />
    <col width="16.62%" />
    <col width="16%" />
    <col width="16%" />
    <col width="34.67%" />

    <thead>
        <tr class="heading">
            <td>Modifying circumstance</td>
            <td>Common pathogens</td>
            <td>First choice</td>
            <td>Alternative</td>
            <td>Additional information</td>
        </tr>
    </thead>

    <tr class="heading2">
        <td colspan="5" width="100%">SECTION TITLE</td>
    </tr>

    <tr class="body">
        <td>column 1</td>
        <td>column 2</td>
        <td>column 3</td>
        <td>column 4</td>
        <td>column 5</td>
    </tr>

</table>

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 <col> elements
• Adding a sixth column and empty <td> elements into each row
• Removing the border-collapse style ( after reading Webkit Browsers Rendering 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 <div>

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 1

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?

<table class="amhtable">
    <col width="16.72%" />
    <col width="16.62%" />
    <col width="16%" />
    <col width="16%" />
    <col width="34.67%" />

    <thead>
        <tr class="heading">
            <td>Modifying circumstance</td>
            <td>Common pathogens</td>
            <td>First choice</td>
            <td>Alternative</td>
            <td>Additional information</td>
        </tr>
    </thead>

    <tbody>
        <tr class="heading2">
            <td colspan="5">SECTION TITLE</td>
        </tr>

        <tr class="body">
            <td>column 1</td>
            <td>column 2</td>
            <td>column 3</td>
            <td>column 4</td>
            <td>column 5</td>
        </tr>
 </tbody>

</table>

What happens if you try that?

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

<tr class="heading2">
    <td colspan="5"><span style="100%">SECTION TITLE</span></td>
</tr>