2009-07-04 10 views
8

Estoy tratando de diseñar una tabla HTML (es información tabular) y se representa de manera diferente en Firefox 3.5 y Chrome 2.0.172 (EDIT e IE7 - que muestra la tabla como Chrome hace).Problema en el diseño de la tabla - Firefox versus Chrome e IE7

que tienen la tabla dentro de un div:

<div id="listcontainer"> 
    <table class="tasklist"> 
    <colgroup> 
     <col class="narrow" /> 
     <col class="wide" /> 
     {{ more column definitions here }} 
    </colgroup> 
{{ various code here }} 
    </table> 
</div> 

y tengo CSS para el div y la tabla:

div#listcontainer { 
    position: relative; 
    float: left; 
    width: 98%; 
    padding: 0; 
    border: 1px; 
    overflow-x: scroll; 
} 

table.tasklist { 
    width: auto; 
    table-layout: auto; 
    border: thin solid; 
    font-size: 9pt; 
    border-collapse: collapse; 
    empty-cells: show; 
} 

col.narrow { 
    min-width: 50px; 
} 
col.wide { 
    min-width: 200px; 
} 

En Firefox, la mesa renders más ancho que el div que contiene, y la barra de desplazamiento en el div permite al usuario desplazarse a las columnas adicionales (que es la acción prevista). Sin embargo, Chrome e IE7 parecen ignorar la propiedad de ancho mínimo de las columnas y anula toda la tabla en el div que contiene. Que es no lo que quiero. ¿Qué estoy haciendo mal?

EDIT: puse los elementos min-anchura en las th y td elementos propios en lugar de utilizar colgroup, y luego se renders como se esperaba en los tres navegadores. Usando cols, la inspección de los elementos en cromo indica que el estilo calculado ha hecho que los anchos de columna para caber dentro de la div ...

Respuesta

2

No sé acerca de cromo, pero creo que IE7 requiere una anchura explícita" : auto; " en elementos para que maneje apropiadamente "min-width". Esto no parece estar documentado en msdn, sin embargo, parece aparecer en google.

http://blog.throbs.net/2006/11/17/IE7+And+MinWidth+.aspx
http://msdn.microsoft.com/en-us/library/ms530820(VS.85).aspx

(También, hay algunas restricciones sobre el uso de min-width con mesas y colgroups, así que lo que está buscando en realidad no podría ser posible.)

+0

no ayuda en este caso. –

Cuestiones relacionadas