html - estilos - ¿Cómo configuro los anchos de las celdas de la tabla al mínimo excepto la última columna?

tablas en html5

Question

Tengo una mesa con 100% de ancho. Si pongo <td> s en él, se extienden con columnas de igual longitud. Sin embargo, quiero que todas las columnas, excepto la última, tengan el ancho más pequeño posible sin envolver el texto.

Lo primero que hice fue establecer width="1px" en todas las <td> s excepto la última (aunque obsoleta, pero el style="width:1px" no tuvo ningún efecto), que funcionó bien hasta que tuve múltiples datos de palabras en la columna. En ese caso, para mantener la longitud lo más pequeña posible, envolvió mi texto.

Déjame demostrar. Imagina esta tabla:

---------------------------------------------------------------------------------
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 recibiendo es esto:

---------------------------------------------------------------------------------
element1         | data             | junk here        | last column
---------------------------------------------------------------------------------
elem             | more data        | other stuff      | again, last column
---------------------------------------------------------------------------------
more             | of               | these            | rows
---------------------------------------------------------------------------------

o (aunque establecí 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 mesa que presenté primero. ¿Cómo logro esto? (Preferiría atenerme al estándar y usar CSS. Honestamente, no me importa si IE no implementó parte del estándar tampoco)

Más explicación: Lo que necesito es mantener las columnas lo más cortas posible sin envolver las palabras (la última columna debe ser tan grande como sea necesario para que el ancho de la tabla llegue al 100%). Si conoces LaTeX, lo que quiero es cómo aparecen las tablas de forma natural en LaTeX cuando configuras su ancho al 100%.

Nota: Encontré this pero todavía me da lo mismo que la última tabla.

Answer 1

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

HTML:

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

CSS:

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%
}

Answer 2

Puede establecer el ancho del div colocando la etiqueta div dentro de td

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/

Answer 3

Un tema ligeramente diferente, pero tal vez ayuda a alguien que 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)}

Tenía el problema al revés: quería establecer una columna de tabla con el ancho mínimo posible sin romper el espacio en blanco (última columna en el siguiente ejemplo) pero el ancho del otro debe 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 shrink clase solo se expanden al ancho mínimo, pero otras se mantienen dinámicas. Esto funciona porque el width de td se expande automáticamente para ajustarse a todo el contenido.

Ejemplo de fragmento

table {
  width: 100%;
}

td {
  padding: 10px;
}

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

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

Answer 4

whitespace-wrap: nowrap no es válido css. Es white-space: nowrap que estás buscando.

Answer 5

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

No use white-space: nowrap use white-space: pre; en lugar.

En la celda de la tabla, evite cualquier formato de código como nuevas líneas y sangría (espacio en blanco) y use <br> para establecer una nueva línea de texto / fila. Me gusta esto:

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

Demostración en CodePen

Answer 6

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 se envuelvan las anteriores. Esto hace lo mismo que las otras respuestas dadas, pero es mucho más eficiente.