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.

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? — Frank Conijn - Support Ukraine, Jul 07 '14 at 22:14
The question was answered in [another StackOverflow thread](https://stackoverflow.com/questions/18367959/table-columns-setting-both-min-and-max-width-with-css). In short, you should just use width instead of max-width. — Mikhail Larionov, Dec 30 '14 at 00:08

score 91 · Answer 1 · answered Sep 14 '11 at 03:01

91

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.

answered Sep 14 '11 at 03:01

Brandon

1,997
3
24
33

1

Unfortunately, it doesn't work in IE8 (and I suppose it does not work in any version of IE...). – nightcoder Sep 14 '11 at 03:19
2

Can this be done as a percentage, because it only takes effect as px on my end... – User Oct 28 '18 at 18:09

Carlos Toledo · Answer 2 · 2017-12-26T18:53:01.753

15

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.

edited Dec 26 '17 at 18:53

answered Aug 14 '15 at 21:09

Carlos Toledo

2,519
23
23

4

What if you don't have a `` section? – Timmmm May 18 '20 at 10:08

score 8 · Answer 3 · edited Aug 27 '17 at 19:40

8

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).

edited Aug 27 '17 at 19:40

Taylor D. Edmiston

12,088
6
56
76

answered Sep 14 '11 at 03:03

isNaN1247

17,793
12
71
118

See this in more detail, especially the max-width and (currently) the problems there, in the similar/equivalent solution this page http://stackoverflow.com/a/24620364/2255628 – Destiny Architect Jul 07 '14 at 21:54

user2587656 · Answer 4 · 2017-10-11T07:48:31.697

5

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".

edited Oct 11 '17 at 07:48

answered Oct 10 '17 at 18:34

user2587656

309
3
5

Can I have a reference of this? – Ziyuan Aug 18 '23 at 14:38

score 2 · Answer 5 · answered Jun 28 '16 at 10:12

there is an option 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', ...) multiple times

this.$el

represents parent element, in my case I have marionette

for those th elements which should have max-width, there should be a max-width attribute like:

<th max-width="120">

score 1 · Answer 6 · edited Aug 27 '17 at 19:14

1

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;

edited Aug 27 '17 at 19:14

Taylor D. Edmiston

12,088
6
56
76

answered May 09 '17 at 11:43

Amay Kulkarni

828
13
16

score -6 · Answer 7 · answered Oct 11 '17 at 08:07

-6

it's very easy

You could add attributes like these

max-width

max-height

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

answered Oct 11 '17 at 08:07

Kano

5
1

How can I limit table column width?

7 Answers7