How to limit the width of a table column?

Question

One of the columns in my table may contain long text with no spaces. How can I limit its width to, say, 150px? I do not want it to always be 150px (if it is empty, it should be narrow), but if there is long text, I want it to be limited to 150px and the text to be wrapped.

Here is an example: http://jsfiddle.net/Kh378/ (let it restrict the 3rd column).

Thanks in advance.

Update:
Setting these styles:

word-wrap: break-word; max-width: 150px; 

does not work in IE8 (tested on different computers), and I believe that it does not work in any version of IE.

Answer 1

Updated

In the td and th tags, I added:

 word-wrap: break-word; max-width: 150px; 

Not fully compatible in every browser, but it starts.

Answer 2

Instead, you need to use width.

 <table> <thead> <tr> <th>Name</th> <th>Age</th> <th style="width: 150px;"></th> </tr> </thead> <tbody> </tbody> </table> 

But only in the <thead> section.

Answer 3

You can create your own column style:

 max-width: 150px; word-wrap: break-word; 

Please note that word-wrap supported on IE 5.5+, Firefox 3.5+ and WebKit (Chrome and Safari).

Answer 4

The question was answered at https://stackoverflow.com/a/166268/168 . In short, you should just use width instead of max-width.

Answer 5

After some experimentation in Chrome, I came to the following:

• if your table has <th> , which should have either "width" or "maximum width"
• <td> should have set "max-width" and "word-wrap: break-word;"

If you use the "width" in <th> , this value will be used. If you use "max-width" in <th> , the value "max-width" <td> used instead.

So, this functionality is rather complicated. And I didn’t even study tables without headings or without long lines that need a “word”.

Answer 6

very easy

You can add attributes like these

max-width

max-height

They can be set in html as an attribute or in CSS as a style.

Answer 7

It is possible to simulate max-width:

 simulateMaxWidth: function() { this.$el.find('th').css('width', ''); // clear all the width values for every header cell this.$el.find('th').each(function(ind, th) { var el = $(th); var maxWidth = el.attr('max-width'); if (maxWidth && el.width() > maxWidth) { el.css('width', maxWidth + 'px'); } }); } 

this function can be called on $ (window) .on ('resize', ...) several times

 this.$el 

represents the parent element, in my case I have a puppet

for those elements that should have a maximum width, there should be a max-width attribute, for example:

 <th max-width="120"> 

Answer 8

1) Indicate the width for each column in <th> according to your needs.

2) Add the word wrap for each <td> to <tr> <table> .

 word-wrap: break-word;