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.
raina77ow :
One possible approach is given below. It uses...\n\nwidth: 100% rule (instead of width: auto) to make table fill the container\n\nwidth: 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.\n\nmax-width: 1px for the last column to ensure that inline-block container is not extended when that column grows, and text is wrapped instead\n\n\n\r\n\r\n.container{\n background-color: #003388;\n color: white;\n display: inline-block;\n}\n\ntable {\n background-color: #008833;\n color: white;\n width: 100%;\n}\n\ntable td:not(:last-child) {\n width: 1px;\n white-space: nowrap;\n}\n\ntable td:last-child {\n max-width: 1px; \n}\r\n<div class=\"container\">\nlong text long text long text long text long text long text\n\n<table>\n <tr>\n <th>Product</th>\n <th>Cardinality</th>\n <th>Price per item</th>\n </tr>\n <tr>\n <td>Apple</td>\n <td>5</td>\n <td>$2</td>\n </tr>\n <tr>\n <td>Pear</td>\n <td>3</td>\n <td>$3</td>\n </tr>\n <tr>\n <td>Sausage</td>\n <td>10</td>\n <td>$0.5</td>\n </tr>\n <tr>\n <td>Pineapple</td>\n <td>2</td>\n <td>$8</td>\n </tr>\n <tr>\n <td>Tomato</td>\n <td>5</td>\n <td>$1</td>\n </tr>\n <tr>\n <td>Lightsaber</td>\n <td>2</td>\n <td>$99 999 999999999 99999999 99999999</td>\n </tr>\n</table>\n\n</div>",
2022-08-14T09:12:37