Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I limit table column width?

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.

like image 270
nightcoder Avatar asked Sep 14 '11 02:09

nightcoder


People also ask

How do I restrict column width in a table?

1) Specify width for each column in <th> according to your need. 2) Add word wrap for each <td> in <tr> of the <table> .

How do I limit td width?

Using width attribute: The <td> tag has width attribute to control the width of a particular column. By assigning a numeric value to this attribute between 0 to 100 in terms of percentage(or you can use pixel format). We can restrict the column width up to that much percentage of the table's total width.

How do I reduce the width of a table in HTML?

To set the table width in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <table> tag, with the CSS property width.


1 Answers

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.

like image 150
Brandon Avatar answered Oct 10 '22 09:10

Brandon