How do you expand the last column of a table to fill the parent container without specifying a width for the container? In this jsfiddle, I want the last column of the green table to fill the blue container. The width of the container should only be determined by its text.
.container{
background-color: #003388;
color: white;
display: inline-block;
}
table {
background-color: #008833;
color: white;
width:auto;
}
table tr td:last-child {
/* width:100%; */
}
Setting the width of the last td fills the entire page.
One possible approach is given below. It uses...
width: 100% rule (instead of width: auto) to make table fill the container
width: 1px; white-space: nowrap; combo trick to make all the columns define their width based on content width; without that rule it seems there's no simple way to override default behaviour of table-layout: auto sharing the whole width between columns equally.
max-width: 1px for the last column to ensure that inline-block container is not extended when that column grows, and text is wrapped instead
.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 fractional units fr to automatically take up the fraction you desire