How do I set the table cell widths to minimum except last column?
Solution 1:
This works in Google Chrome, at least. (jsFiddle)
table {
border: 1px solid green;
border-collapse: collapse;
width: 100%;
}
table td {
border: 1px solid green;
}
table td.shrink {
white-space: nowrap
}
table td.expand {
width: 99%
}
<table>
<tr>
<td class="shrink">element1</td>
<td class="shrink">data</td>
<td class="shrink">junk here</td>
<td class="expand">last column</td>
</tr>
<tr>
<td class="shrink">elem</td>
<td class="shrink">more data</td>
<td class="shrink">other stuff</td>
<td class="expand">again, last column</td>
</tr>
<tr>
<td class="shrink">more</td>
<td class="shrink">of </td>
<td class="shrink">these</td>
<td class="expand">rows</td>
</tr>
</table>
Solution 2:
whitespace-wrap: nowrap
is not valid css. It's white-space: nowrap
you're looking for.