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

whitespace-wrap: nowrap is not valid css. It’s white-space: nowrap you’re looking for.