Shahbaz Shahbaz - 5 months ago 11
CSS Question

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

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

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

Comments