plantillas - hojas de estilo css para tablas

Aprieta una columna de la tabla a su ancho mínimo posible

Question

A lo largo de mi sitio web, tengo muchas <table> s en las que hay una columna específica que queremos exprimir en su mínimo espacio posible (sin tener que envolver el texto). Otras células hermanas comparten el resto del espacio automáticamente.

Estoy usando el siguiente truco y funciona en todos los navegadores excepto IE7-. (En este momento en realidad solo me importa IE7)

table {width:100%;}
table td.min-col {white-space:nowrap; width:1px; }

jsEnlace físico: http://jsfiddle.net/vm8gc/23/

Si prueba esto en IE7 notará que actúa de manera diferente (comportamiento no esperado). - ver captura de pantalla a continuación.

¿Alguien puede pensar en una solución para IE7 para lograr esto?

Archivos adjuntos:

Todos los otros navegadores:

IE7:

Answer 1

Versión CSS 2

Por algún motivo, Internet Explorer parece ignorar white-space en white-space en los TD. La mejor forma de resolver el problema es utilizar un tramo dentro del TD.

<td><span style="white-space: nowrap;">This should not wrap</span></td>

Como de costumbre, IE hace lo propio;)

Para obtener información sobre white-space soporte de white-space en white-space , consulte aquí:

http://www.quirksmode.org/css/whitespace.html

Versión PRE

Una alternativa que tendría un mejor soporte con navegadores más antiguos sería hacer lo siguiente:

<td><pre>This will not wrap</pre></td>

Y luego haga que su configuración de pre elementos sea diseñada de la misma manera que su texto normal o habilítelo para heredar el estilo de sus padres (la herencia probablemente tenga menos soporte que la especificación del estilo) :

td pre { font-family: inherit; font-size: inherit; color: inherit; ... }