Ancho máximo no funciona en la tabla para IE7

Entonces, ¿por qué el "ancho máximo" no funciona en las tablas en Internet Explorer 7? El ancho máximo está disponible en otros elementos, y parece funcionar bien, pero cuando se aplica a una tabla, no puedo hacer nada, es decir, la regla de ancho máximo simplemente se ignora. Aquí está el código:Ancho máximo no funciona en la tabla para IE7

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Foo</title> 
</head> 
<body> 
    <div style="background-color: Red; max-width: 1000px;"> 
     <table style="background-color: Green; max-width: 500px;"> 

       <tr> 
        <td><a href="#" class="action view">View</a></td> 
        <td>7/20/2011</td> 
        <td>James Smith</td> 
        <td>345 NW 23rd Ave Gainesville, FL 32606</td> 
        <td>Alachua Blah blah sf jfh jsdhjs fjsh djkf sdjkhk</td> 
        <td>345621</td> 
        <td>Fred Smith</td> 
       </tr> 
     </table> 
    </div> 
</body> 
</html>

En Firefox, la mesa se ve limitada adecuadamente a 500 píxeles, y el texto dentro de las células se rompe de manera apropiada (entre las palabras, al igual que lo era de esperar). En IE7, sin embargo, es como si se hubiera aplicado la regla "no-wrap". Cada celda se estira con la que se necesita, sin intentar romper el texto dentro de la celda, y toda la tabla simplemente se estira para ignorar la regla de ancho máximo.

¿Qué pasa con esta basura? ¿Cómo pongo Max-Width en una tabla en IE7? (Funciona bien en FF & IE8)

lo que es lo he intentado eso no funciona:

tabla {display: block; }

td {word-wrap: break-word; }

tabla {table-layout: fixed; }

Fuente

2011-08-11 Graham

Al parecer IE7 hace cosas diferentes con 'max-width' dependiendo de la DTD: http://www.wileymedia.com/weblog/archives/2007/02/maxwidth_and_internet_explorer.html – vcsjones

si he intentado algunos tipos de documento diferentes en vano. Ese artículo es correcto para los elementos generales de nivel de bloque, pero no arregla la tabla. – Graham

la Los navegadores WebKit ignoran la propiedad de ancho máximo establecida para una tabla, tanto Chrome como Safari harán que la tabla ignore el ancho máximo como lo hace IE7. Recomendaría establecer la propiedad max-width a un elemento contenedor como div.

Ver http://jsfiddle.net/P5YPR/1/

Fuente

2011-08-11 15:12:12

+1 Siempre seré compatible con soluciones de varios navegadores sobre hacks de IE. Buen trabajo. – AlienWebguy

@Alien Me alegro de escucharlo :) –

todavía no funciona en IE7. ¿¿¿Algun consejo??? –

Prueba esto:

table#my_table { 
    max-width:500px; 
    width:expression(document.body.clientWidth > 500? "500px": "auto"); 
}

Desafortunadamente esto no va a validar debido a la ?. La buena noticia es, ya que es un IE-única solución que simplemente puede hacer elementos condicionales cuando se crea la etiqueta <body> y clases IE-específicos de configuración:

<!--[if IE 9]><body class="ie9 ie"><![endif]--> 
<!--[if IE 8]><body class="ie8 ie"><![endif]--> 
<!--[if IE 7]><body class="ie7 ie"><![endif]--> 
<!--[if lte IE 6]><body class="ie6 ie"><![endif]--> 
<![if !IE]><body><![endif]>

En su CSS:

table#my_table { 
    width:500px; 
    max-width:500px; 
} 

.ie7 table#my_table { 
    width:expression(document.body.clientWidth > 500? "500px": "auto"); 
}

Fuente

2011-08-11 15:08:38 AlienWebguy

+1 Siiick. Normalmente no recomiendo apoyar IE <8, pero esto es sólido. – Maverick

Esto no se dirige a WebKit. Safari y Chrome seguirán representando la tabla ignorando la propiedad de ancho máximo. Si @Graham está verdaderamente preocupado por la compatibilidad con navegadores cruzados, un elemento contenedor es mucho más elegante. –

Su respuesta aquí funciona muy bien, pero seleccioné el Bjorn como "correcto" para mi situación porque el envoltorio div se necesita de todos modos, y esas expresiones simplemente me asustan. Sin embargo, me gustan las clases en el cuerpo con los comentarios de IE. ¡Gracias! – Graham

Ancho máximo no funciona en la tabla para IE7

Respuesta

Cuestiones relacionadas