Question

How do to remove Auto Resize of Table cell? When I enter a text that would exceed the width of a table cell it automatically increases its width. Is there a way to disable its auto resize?

I’m directly adding text in table cell without any other element than <td>,

<td>Text is Here...</td>

Is there an element when the text exceeds the <td>‘s width it will auto end line the next word. is that possible? I tried <p> and it doesn’t work for me.

This is a sample:

http://jsfiddle.net/88RtG/2/

I want the first cell to have same width all the others regardless of its contents.

Answer 1

Browsers apparently expand a cell no matter what (even table-layout: fixed does not help), if the cell contains a string of characters that cannot be broken by the rules that the browser is applying.

If a string like “asdasdasdasdasdasddasdasdadasd” has no permissible breaking points, then it seems that the only way is to wrap the cell content in an element, say <td><div class=cell>...</div></td> and set a width on that inner element. You would then have to deal with the overflow issue (should the excess content flow into the next cell, or be hidden, or what?).

If it has permissible breaking points, mark them, using <wbr> or ​ (More info on this: http://www.cs.tut.fi/~jkorpela/html/nobr.html#suggest ) for simple line break opportunities, ­ for hyphenation points.