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