html - attribute - ¿Cómo obtengo la columna de la derecha para llenar el espacio restante?

title html

Question

Supongamos que tengo una mesa con solo tres columnas pequeñas. Parece desordenado y desequilibrado tener una mesa estrecha y alta que abrace el lado izquierdo de mi pantalla ( example ), así que me gustaría que la mesa cubra el ancho de la página. Sin embargo, cuando establezco el ancho de la tabla al 100%, todas las columnas se alargan también, por lo que ahora mis datos se distribuyen uniformemente por la pantalla, lo que también parece desordenado ( example ).

Lo que estoy buscando es una solución en la que todas las columnas tengan el mismo tamaño que si la width: auto la tabla width: auto , pero la columna final llena el espacio restante en la pantalla. Esto es lo que hace Spotify, por ejemplo:

La columna "Usuario" cubrirá el ancho restante, no importa qué. ¿Hay una forma relativamente simple de lograr esto con tablas HTML y CSS?

Answer 1

Establezca el ancho de su mesa al 100%. Establezca los anchos en todas las columnas menos en la derecha. La columna más a la derecha se expandirá para llenar el espacio disponible.

Answer 2

He encontrado una solución simple:

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

Resultado:

body {
font: 12px "Sans serif";
}
table {
width: 100%;
background-color: #222222;
color: white;
border-collapse: collapse;
}
table th {
padding: 10px;
text-align: left;
}
table td {
padding: 2px 10px;
}
table td:last-child {
width: 100%;
}
table td:nth-child(odd), table th:nth-child(odd) {
background-color: rgba(255, 255, 255, 0.05);
}
table tr:nth-child(even) {
background-color: rgba(255, 255, 255, 0.05);
}
table tr:last-child td {
padding-bottom: 10px;
}

<table>
<tr>
<th>Product</th>
<th>Cardinality</th>
<th>Price per item</th>
</tr>
<tr>
<td>Apple</td>
<td>5</td>
<td>$2</td>
</tr>
<tr>
<td>Pear</td>
<td>3</td>
<td>$3</td>
</tr>
<tr>
<td>Sausage</td>
<td>10</td>
<td>$0.5</td>
</tr>
<tr>
<td>Pineapple</td>
<td>2</td>
<td>$8</td>
</tr>
<tr>
<td>Tomato</td>
<td>5</td>
<td>$1</td>
</tr>
<tr>
<td>Lightsaber</td>
<td>2</td>
<td>$99 999</td>
</tr>
</table>

Esto parece funcionar en mi escenario actual, pero parece algo que puede causar efectos secundarios no deseados en otras situaciones. Si me tropiezo con alguno, voy a editar esta respuesta.

Posibles efectos secundarios

• Las celdas de la tabla de palabras múltiples se envolverán en varias líneas para mantener la columna lo más estrecha posible. Una solución es usar white-space: nowrap en las celdas de la tabla, pero eso impedirá que las celdas con mucho texto se envuelvan cuando deberían.

Answer 3

Si esto es lo que quería decir: image entonces puedo lograr eso usando una estructura de tabla html estándar con el siguiente CSS:

table {
width:auto;
}
td {
white-space:nowrap;
}
td:last-child {
width:100%;
}

--EDIT: trabaja con tu jsfiddle