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.
Slightly different topic but maybe it helps someone who stumbles on this question like me.
(I just saw the comment by Campbeln who suggests exactly this after writing my answer below, so this is basically a detailed explanation of his comment)
I had the problem the other way around: I wanted to set one table column to the minimum width possible without breaking it on white space (last column in the following example) but the other's width should be dynamic (including line breaks):
Simple solution:
HTML
CSS
Columns with class
shrink
only expand to the minimum width but others stay dynamic. This works becausewidth
oftd
is automatically expanded to fit whole content.Example Snippet
By using the code above, the last table-cell will try to be as big as possible, and you will prevent the ones before that from wrapping. This does the same as the other answers given, but way more efficient.
whitespace-wrap: nowrap
is not valid css. It'swhite-space: nowrap
you're looking for.You can set fix width by placing
div
tag insidetd
https://jsfiddle.net/8bf17o1v/
If you need multiple text lines in table cell.
Do not use
white-space: nowrap
usewhite-space: pre;
instead.In table cell avoid any code format like new lines and indention (white-space) and use
<br>
to set a new text line/row. Like this:Demo on CodePen
This works in Google Chrome, at least. (jsFiddle)
HTML:
CSS: