Columnas espaciadas que se contraen en el navegador web de Android (cuando se usan páginas de ajuste automático)

Actualización: he registrado un informe de error con Google: http://code.google.com/p/android/issues/detail?id=22447&can=4&colspec=ID%20Type%20Status%20Owner%20Summary%20Stars

Actualización: @benni_mac_b señala que el problema desaparece si desactiva las páginas de ajuste automático. Esta 'solución' funciona en 2.1 y 2.2 – resulta que el teléfono 2.3 en el que estaba probando había desactivado auto-ajuste para empezar, y cuando está habilitado la tabla se rompe de nuevo.

Supongo que ahora estoy buscando una manera de decirle a Android que no ajuste automáticamente la tabla (y reemplaza la configuración del navegador). No me gustan mis posibilidades a juzgar por mis búsquedas de Google hasta ahora.

He encontrado un problema extraño con el navegador web de Android y las columnas extendidas – por ejemplo, si tengo esta estructura:

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

La fila dividida se reducirá para ajustarse al tamaño de la pantalla, incluso si la propia tabla es aún más ancha. Esto significa que el fondo de la fila heading2 falta en la mayoría de la tabla en algunos casos, por lo que parece bastante extraño.

Esto no sucede en el iPhone, ni en ningún navegador de escritorio (Chrome, IE, FF, Safari) que tengamos en cuenta, solo en Android (varios dispositivos y versiones).

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

Hasta ahora, he intentado lo siguiente:

Eliminación de los elementos <col>
Adición de una sexta columna y elementos <td> vacíos en cada fila
Quitar el estilo border-collapse (después de leer Webkit Browsers Rendering for Table Dependiendo de colspan )
Establecer el ancho de la columna expandida al 100% (junto con los cambios anteriores)
Establecer un ancho fijo en la tabla y establecer la columna extendida a 100%
Se reemplazaron las anchuras de% basadas de las columnas con anchos fijos de píxeles
Defina la posición como relativa para la celda expandida (y luego la fila) y ajuste a la izquierda ya la derecha a 0.
Defina la posición como relativa para la fila con la izquierda como 0 y el ancho como 1000px
Envolvió la mesa en un 100% de ancho <div>

Una cosa que nos dimos cuenta ayer es que la tabla debe tener un borde negro de 1px – pero hay una brecha en los dispositivos 2.1 / 2.2 que estamos probando donde la fila no se completa. Realmente parece ser un problema de renderizado en estos dispositivos.

Me pregunto si lo siguiente le ayudará:

Envuelva las filas del cuerpo en un elemento tbody:
Quite el ancho = "100%" de la fila del encabezado. Colspan = "5" debe abarcar el ancho de la tabla de todos modos, con el tamaño del navegador en consecuencia. Me pregunto si el navegador de Google está interpretando literalmente como el ancho de la pantalla actual.
Agregue lo siguiente a la clase para .amhtable:
```
 float: left; width: 100%; 
```

Para ver si es un error de tamaño relativo.

¿Desafortunadamente, esto sucede si la fila del título aparece en cualquier parte de la tabla? ¿O es sólo la primera vez que ocurre después de 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>

¿Qué sucede si lo intentas?

Otras cosas que puede intentar están poniendo el texto del encabezado real en un elemento como:

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

Tal vez es un error, pero ¿trató de poner en su mesa:

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

¿Se supone que el ancho total de las columnas es del 100,01%?

Intente reducir la primera columna al 16.71%?

No estoy seguro, pero pruebe este método http://jsfiddle.net/DhAYd/9/

El documento (X) HTML en su informe de error no es válido; En el mejor de los casos es incompleta. Se requiere una declaración DOCTYPE (HTML 4.01, XHTML 1.0) o un doctype (HTML5). En el borrador de trabajo HTML5 actual, el elemento col no tiene un atributo width (el W3C Validator dice que está obsoleto, sino que debería usar CSS). Pero esto tampoco puede ser Valid HTML o XHTML 1.0, ya que falta el elemento de title .

Como resultado de la declaración DOCTYPE que falta, es probable que el motor de diseño entre en el modo Quirks , y no se puede esperar un comportamiento interoperable.

Además, los porcentajes en (X) HTML no están especificados para soportar decimales , aunque no está explícitamente prohibido. Un validador de sintaxis HTML no capturará este error como %Length es un alias para CDATA (cualquier dato de carácter).

Debieras