¿Cómo expande la última columna de una tabla para llenar el contenedor principal sin especificar un ancho para el contenedor? En este jsfiddle , quiero que la última columna de la tabla verde llene el contenedor azul. El ancho del contenedor solo debe estar determinado por su texto.
.container{ background-color: #003388; color: white; display: inline-block; } table { background-color: #008833; color: white; width:auto; } table tr td:last-child { /* width:100%; */ }Establecer el ancho de la última td llena toda la página.
A continuación se ofrece un posible enfoque. Usa...
width: 100% (en lugar de width: auto ) para que la tabla llene el contenedor
width: 1px; white-space: nowrap; truco combinado para hacer que todas las columnas definan su ancho en función del ancho del contenido; sin esa regla, parece que no hay una forma simple de anular el comportamiento predeterminado del table-layout: auto todo el ancho entre las columnas por igual.
max-width: 1px para la última columna para garantizar que el contenedor inline-block no se extienda cuando esa columna crezca, y el texto se ajuste en su lugar
.container{ background-color: #003388; color: white; display: inline-block; } table { background-color: #008833; color: white; width: 100%; } table td:not(:last-child) { width: 1px; white-space: nowrap; } table td:last-child { max-width: 1px; } <div class="container"> long text long text long text long text long text long text <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 999999999 99999999 99999999</td> </tr> </table> </div>Use unidades fraccionarias fr para tomar automáticamente la fracción que desee