How do I set the table cell widths to minimum except last column?

Question

I have a table with 100% width. If I put <td>s in it, they get spread out with equal length columns. However, I want all the columns except last to have as small a width as possible, without wrapping text.

What I did first was that I set width="1px" in all <td>s except last (although deprecated, but the style="width:1px" didn't have any effect), which worked fine until I had multi-word data in the column. In that case, to keep the length as small as possible, it wrapped my text.

Let me demonstrate. Imagine this table:

--------------------------------------------------------------------------------- element1 | data      | junk here   | last column --------------------------------------------------------------------------------- elem     | more data | other stuff | again, last column --------------------------------------------------------------------------------- more     | of        | these       | rows --------------------------------------------------------------------------------- 

No matter what I try, what I keep getting is either this:

--------------------------------------------------------------------------------- element1         | data             | junk here        | last column --------------------------------------------------------------------------------- elem             | more data        | other stuff      | again, last column --------------------------------------------------------------------------------- more             | of               | these            | rows --------------------------------------------------------------------------------- 

or (even though I set style="whitespace-wrap:nowrap") this:

---------------------------------------------------------------------------------          |      | junk  | last element1 | data |       |           |      | here  | column ---------------------------------------------------------------------------------          | more | other | again, elem     |      |       | last          | data | stuff | column --------------------------------------------------------------------------------- more     | of   | these | rows --------------------------------------------------------------------------------- 

I want to get the table I presented first. How do I achieve this? (I'd rather stick to standard and using CSS. I honestly don't care if IE hasn't implemented part of the standard either)

More explanation: What I need is to keep the columns as short as possible without wrapping words (last column should be as large as it needs to make the table width actually reach 100%). If you know LaTeX, what I want is how tables naturally appear in LaTeX when you set their width to 100%.

Note: I found this but it still gives me the same as last table.

Answer 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>