How can I limit table column width?

Question

One of the columns in my table can contain a long text without whitespaces. How can I limit its width to, say, 150px? I don't want it to be 150px always (if it's empty it should be narrow), but if there is a long text I want it to be limited with 150px and the text to be wrapped.

Here is a test example: http://jsfiddle.net/Kh378/ (let's limit the 3rd column).

Thank you in advance.

Update:
Setting this styles:

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

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

Solution 1

Updated

On the table's td and th tags I added:

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

Not fully compatible in every browser but a start.

Solution 2

You need to use width instead.

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

But just in the <thead> section.

Solution 3

You should be able to style your column with:

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

Note that word-wrap is supported in IE 5.5+, Firefox 3.5+, and WebKit browsers (Chrome and Safari).

Solution 4

After some experimentation in Chrome I came to the following:

• if your table has a <th> that should have either a "width" or a "max-width" set
• the <td>'s must have set a "max-width" and "word-wrap: break-word;"

If you use a "width" in the <th> its value will be used. If you use a "max-width" in the <th> the "max-width" value of the <td>'s is used instead.

So this functionality is quite complex. And I didn't even study tables without headers or without long strings that need a "break-word".

Solution 5

1) Specify width for each column in <th> according to your need.

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

word-wrap: break-word;

View more solutions

Comments

[Frank Conijn - Support Ukraine]

As this question is almost three years old and it currently does not have a bounty, I was wondering whether it still needs an answer?

[Mikhail Larionov]

The question was answered in another StackOverflow thread. In short, you should just use width instead of max-width.

[nightcoder]

@Frank Conijn, Yes, it does! :)

[Developer]

That 2 years later reply though

[Reversed Engineer]

The answer won't change, so the age does not matter :)

[nightcoder]

Unfortunately, it doesn't work in IE8 (and I suppose it does not work in any version of IE...).

[Destiny Architect]

See this in more detail, especially the max-width and (currently) the problems there, in the similar/equivalent solution this page stackoverflow.com/a/24620364/2255628

[User]

Can this be done as a percentage, because it only takes effect as px on my end...

[Timmmm]

What if you don't have a <thead> section?