Tengo una mesa con 100% de ancho. Si pongo <td>
s en él, se distribuyen con columnas de igual longitud. Sin embargo, quiero que todas las columnas, excepto la última, tengan el menor ancho posible, sin ajustar el texto.
Lo que hice primero fue configurar width="1px"
todos los <td>
mensajes excepto el último (aunque en desuso, pero style="width:1px"
no tuvo ningún efecto), lo que funcionó bien hasta que tuve datos de varias palabras en la columna. En ese caso, para mantener la longitud lo más pequeña posible, envolvió mi texto.
Déjame demostrarte. Imagina esta mesa:
---------------------------------------------------------------------------------
element1 | data | junk here | last column
---------------------------------------------------------------------------------
elem | more data | other stuff | again, last column
---------------------------------------------------------------------------------
more | of | these | rows
---------------------------------------------------------------------------------
No importa lo que intente, lo que sigo obteniendo es esto:
---------------------------------------------------------------------------------
element1 | data | junk here | last column
---------------------------------------------------------------------------------
elem | more data | other stuff | again, last column
---------------------------------------------------------------------------------
more | of | these | rows
---------------------------------------------------------------------------------
o (aunque configuré style="whitespace-wrap:nowrap"
) esto:
---------------------------------------------------------------------------------
| | junk | last
element1 | data | |
| | here | column
---------------------------------------------------------------------------------
| more | other | again,
elem | | | last
| data | stuff | column
---------------------------------------------------------------------------------
more | of | these | rows
---------------------------------------------------------------------------------
Quiero obtener la tabla que presenté primero. ¿Cómo logro esto? (Prefiero ceñirme al estándar y usar CSS. Honestamente, no me importa si IE tampoco ha implementado parte del estándar)
Más explicación: lo que necesito es mantener las columnas lo más cortas posible sin envolver palabras (la última columna debe ser tan grande como sea necesario para que el ancho de la tabla alcance el 100%). Si conoces LaTeX, lo que quiero es cómo las tablas aparecen naturalmente en LaTeX cuando estableces su ancho al 100%.
Nota: encontré esto pero todavía me da lo mismo que la última tabla.
fuente
Respuestas:
whitespace-wrap: nowrap
no es CSS válido. Es lowhite-space: nowrap
que estás buscando.fuente
Esto funciona en Google Chrome, al menos. ( jsFiddle )
fuente
width
enfoque para mis necesidades ya que tengo varias columnas anchas (en lugar de una columna ancha, ya que la solución anterior funciona mejor). He quitadowidth: 99%
desdeexpand
y ha añadidowidth: 1%
ashrink
y esta solución funcionó bien para mí!td:nth-child(1), td:nth-child(2){white-space:nowrap;} td:nth-child(3){width: 99%;}
- Por si acaso pasa algún novato. :)col
'sclass
valor de los atributos' a la tabla correspondientetd
sAl usar el código anterior, la última celda de la tabla intentará ser lo más grande posible y evitará que las anteriores se ajusten. Esto hace lo mismo que las otras respuestas dadas, pero es mucho más eficiente.
fuente
width: 1px;
al estilo que no es el último hijo para que las columnas que no sean las últimas se representen con un ancho mínimo.Tema un poco diferente, pero tal vez ayude a alguien que se tropieza con esta pregunta como yo.
(Acabo de ver el comentario de Campbeln, quien sugiere exactamente esto después de escribir mi respuesta a continuación, por lo que esta es básicamente una explicación detallada de su comentario)
Tuve el problema al revés: quería establecer una columna de la tabla con el ancho mínimo posible sin romperla en el espacio en blanco (última columna en el siguiente ejemplo) pero el ancho de la otra debería ser dinámico (incluidos los saltos de línea):
Solución simple:
HTML
CSS
Las columnas con clase
shrink
solo se expanden hasta el ancho mínimo, pero otras permanecen dinámicas. Esto funciona porquewidth
detd
se expande automáticamente para encajar el contenido entero.Fragmento de ejemplo
Mostrar fragmento de código
fuente
Puede establecer el ancho fijo colocando la
div
etiqueta dentrotd
https://jsfiddle.net/8bf17o1v/
fuente
Si necesita varias líneas de texto en la celda de la tabla.
No use
white-space: nowrap
usewhite-space: pre;
en su lugar.En la celda de la tabla, evite cualquier formato de código como nuevas líneas y sangría (espacio en blanco) y utilícelo
<br>
para establecer una nueva línea / fila de texto. Me gusta esto:Demostración en CodePen
fuente
Una combinación de cualquiera
white-space: nowrap
owhite-space: pre
conmin-width: <size>
hará el trabajo.width: <size>
por sí solo no es suficiente para evitar que la mesa se apriete.fuente