How can I limit table column width?

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.

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.

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

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

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

How can I limit table column width?

Related

Recent Posts