CSS: establecer un ancho máximo en una tabla

Question

Estoy generando registros de aplicaciones en html, y me he tropezado con un problema bastante molesto. Tengo la siguiente distribución:

| Action | Result | File path   | 

Por ejemplo

| Copy | Success | C:\VeryVeryVeryLongF | 
|  |   | ileName.txt   | 

Las columnas 1 y 2 sólo se muestran etiquetas cortas: sus contenidos deben permanecer en una sola línea. Por otro lado, la columna 3 puede contener rutas de archivos muy largas, que deben abarcar varias líneas si no caben en una sola línea.

Para lograr esto, he utilizado white-space: nowrap; en las primeras columnas, y white-space: normal; word-break: break-all; en el pasado. Además, la tabla tiene width:100%.

Esto funciona muy bien en Chrome e Internet Explorer, pero no en Firefox: En resumen, parece que no puedo encontrar una manera de decirle a Firefox 8.0 que no amplíe la última columna de la tabla y que el texto líneas múltiples. En mi ejemplo anterior, Firefox imprime

| Copy | Success | C:\VeryVeryVeryLongFileName.txt | 

El texto en las dos primeras columnas pueden variar, por lo que no se puede establecer su anchura de forma manual y el uso de table-layout: fixed. También intenté configurar max-width en la tabla y envolverlo en un div, pero no sirvió.

Ver http://jsfiddle.net/GQsFx/6/ para un ejemplo de la vida real =) ¿Cómo puedo hacer que Firefox se comporte como Chrome?

Answer 1

uso de este css

.actions { 
width:100%; 
} 
.actions tr td:nth-child(3) { 
width:200px; 
word-wrap:break-word; 
    display:inline-block; 
} 

Answer 2

ancho máximo es CSS2 válido, pero sólo está soportado en NS7, Opera 7 y probablemente Mozilla. No creo que sea compatible con IE 6.

Answer 3

Intenta poner width: auto;. Esto le dirá al navegador para utilizar el espacio necesario ...

Answer 4

esto debería funcionar:

.actions tr td:nth-child(3) { 
     white-space: normal; 
     word-break: break-all; 
     max-width:200px; 
    } 

Answer 5

El siguiente CSS parece conseguir que funcione para mí. Tenga en cuenta la adición de table-layout: fixed, y el uso de word-wrap: break-word.

.actions { 
    width:100%; 
    table-layout:fixed; 
} 

.actions tr td { 
    white-space: nowrap; 
} 

.actions tr td:nth-child(3) { 
    white-space:normal; 
    word-wrap: break-word; 
} 

Answer 6

¿Funciona? Esto parece funcionar con jsfiddle. Porcentaje basado en los primeros dos cols, luego ancho automático el tercero, con table-layout: fijado en la tabla.

http://jsfiddle.net/keithwyland/uuF9k/1/

.actions { 
    width:100%; 
    table-layout: fixed; 
} 

.actions tr td { 
    white-space: nowrap; 
    width: 15%; 
} 

.actions tr td:nth-child(3) { 
    white-space: normal; 
    word-break: break-all; 
    word-wrap: break-word; 
    width: auto; 
}