Getting only one column in a table to word wrap.
I'm playing with HTML and have tables with a number of columns. If the div they are in isn't wide enough then the contents in the columns will break and wrap. However I'd like only one column to break and wrap with all of the others staying fixed no matter what is in them.
Is there an easy way to accomplish this? I could specify the column widths (as a percentage or specify a fixed width) for those I don't want to break but that seems like work. Is there an easier method?
Is there an easy way to accomplish this? I could specify the column widths (as a percentage or specify a fixed width) for those I don't want to break but that seems like work. Is there an easier method?
You mean something like this?
http://jsfiddle.net/7usnjq5x/2/
I've configured the outer container so that you can use your mouse to adjust the size and see what happens. This is an example originally from https://stackoverflow.com/questions/3568262/css-columns-fixed-width-and-remainder that I've modified to better demonstrate the principle.
http://jsfiddle.net/7usnjq5x/2/
I've configured the outer container so that you can use your mouse to adjust the size and see what happens. This is an example originally from https://stackoverflow.com/questions/3568262/css-columns-fixed-width-and-remainder that I've modified to better demonstrate the principle.
You can use the css white-space rule to prevent text from wrapping. The following will prevent wrapping on all but the first column:
td { white-space: nowrap; }
td:nth-child(1) { white-space: normal; }ASKER
Give us about six hours to work out if I can use JSFiddle. Looks semi-interesting.
At present a code sample is here http://jsfiddle.net/10kqxtfj/5/
The Spare Part column is the one I want to wrap. All others I want to stay still. The width here is 300 px for showing the wrapping. It is normally about 700 px.
At present a code sample is here http://jsfiddle.net/10kqxtfj/5/
The Spare Part column is the one I want to wrap. All others I want to stay still. The width here is 300 px for showing the wrapping. It is normally about 700 px.
ASKER
Hmm.
@Chris Stanyon - that looks interesting ...
@Chris Stanyon - that looks interesting ...
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks everyone.
Chris's code did it. I've got a little bit more experimenting to do as there are some <th> which might need to be smacked as well.
JSFiddle is interesting. Thanks Shaun.
And Terry that code is scaring me. I'm not that advanced in HTML and CSS but thanks for the time in putting it up.
Chris's code did it. I've got a little bit more experimenting to do as there are some <th> which might need to be smacked as well.
JSFiddle is interesting. Thanks Shaun.
And Terry that code is scaring me. I'm not that advanced in HTML and CSS but thanks for the time in putting it up.
https://jsfiddle.net