¿Cómo configuro los anchos de celda de la tabla al mínimo, excepto la última columna?


106

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.


¡Aparentemente lo es! También es vergonzoso, dado que leí mal el campo css.
Shahbaz

Respuestas:


54

whitespace-wrap: nowrapno es CSS válido. Es lo white-space: nowrapque estás buscando.


97

Esto funciona en Google Chrome, al menos. ( jsFiddle )

table {
  border: 1px solid green;
  border-collapse: collapse;
  width: 100%;
}

table td {
  border: 1px solid green;
}

table td.shrink {
  white-space: nowrap
}

table td.expand {
  width: 99%
}
<table>
  <tr>
    <td class="shrink">element1</td>
    <td class="shrink">data</td>
    <td class="shrink">junk here</td>
    <td class="expand">last column</td>
  </tr>
  <tr>
    <td class="shrink">elem</td>
    <td class="shrink">more data</td>
    <td class="shrink">other stuff</td>
    <td class="expand">again, last column</td>
  </tr>
  <tr>
    <td class="shrink">more</td>
    <td class="shrink">of </td>
    <td class="shrink">these</td>
    <td class="expand">rows</td>
  </tr>
</table>


7
También me hizo el día :) <3
Kaan Soral

10
Tuve que cambiar el widthenfoque para mis necesidades ya que tengo varias columnas anchas (en lugar de una columna ancha, ya que la solución anterior funciona mejor). He quitado width: 99%desde expandy ha añadido width: 1%a shrinky esta solución funcionó bien para mí!
Campbeln

2
¡Encantador! Si desea que se expanda la misma columna, en lugar de etiquetar todo con una clase, hice esto: td:nth-child(1), td:nth-child(2){white-space:nowrap;} td:nth-child(3){width: 99%;}- Por si acaso pasa algún novato. :)
ElizaWy

@ElizaWy En esta respuesta ( stackoverflow.com/questions/9623601/... ) He creado un script de jQuery, que vamos a copiar los col's classvalor de los atributos' a la tabla correspondiente tds
yunzen

36
td:not(:last-child){
    white-space: nowrap;
}

td:last-child{
    width: 100%;
}

Al 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.


Amo la sencillez.
juanmirocks

3
Para su información, al menos en IE11 (modo de borde), tiene que agregar 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.
ewh

¡Claramente la solución más limpia en esta página! 👍
BoD

13

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):

-----------------------------------------------------------------------------------
element1 | data      | junk here which can   | last column, minimum width, one line
                       span multiple lines
-----------------------------------------------------------------------------------
elem     | more data | other stuff           | again, last column
-----------------------------------------------------------------------------------
more     | of        | these                 | rows
-----------------------------------------------------------------------------------

Solución simple:

HTML

<table>
  <tr>
    <td>element1</td>
    <td>data</td>
    <td>junk here which can span multiple lines</td>
    <td class="shrink">last column, minimum width, one line</td>
  </tr>
  <tr>
    <td>elem</td>
    <td>more data</td>
    <td>other stuff</td>
    <td class="shrink">again, last column</td>
  </tr>
  <tr>
    <td>more</td>
    <td>of</td>
    <td>these</td>
    <td class="shrink">rows</td>
  </tr>
</table>

CSS

td.shrink {
  white-space: nowrap;
  width: 1px;
}

Las columnas con clase shrinksolo se expanden hasta el ancho mínimo, pero otras permanecen dinámicas. Esto funciona porque widthde tdse expande automáticamente para encajar el contenido entero.

Fragmento de ejemplo


3

Puede establecer el ancho fijo colocando la divetiqueta dentrotd

table {
    border: 1px solid green;
    border-collapse: collapse;
    width:100%;
}

table td {
    border: 1px solid green;
}

table td:nth-child(1) {
  width: 1%;
}

table td:nth-child(1) div {
  width: 300px;
}
<table>
    <tr>
        <td><div>element1 element1 element1 element1 element1 element1 </div></td>
        <td>data</td>
        <td>junk here</td>
        <td>last column</td>
    </tr>
    <tr>
        <td><div>element2</div></td>
        <td>data</td>
        <td>junk here</td>
        <td>last column</td>
    </tr>
    <tr>
        <td><div>element3</div></td>
        <td>data</td>
        <td>junk here</td>
        <td>last column</td>
    </tr>
</table>

https://jsfiddle.net/8bf17o1v/


1

Si necesita varias líneas de texto en la celda de la tabla.

No use white-space: nowrapuse white-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:

<td>element1<br><strong>second row</strong></td>

Demostración en CodePen


0

Una combinación de cualquiera white-space: nowrapo white-space: precon min-width: <size>hará el trabajo. width: <size>por sí solo no es suficiente para evitar que la mesa se apriete.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.