<textarea> expands and destroys table formatting

Is there a way to constrict how far a <textarea> can expand? Or a way to format a <table> so that it d开发者_开发问答oesn't look bad when you expand a <textarea>?

The only way I know is with the resize css property. It is a CSS3 property so it may not help you if you are dealing with older browsers. Try applying this class to your text areas...

.noresize{
    resize:none;
}

Use max-height and max-width for the style of textarea. This will prevent the textarea to be expandable.

Note: IE doesn't know max-width and max-height. but you can do something like this:

textarea{ 
   width: expression( document.body.clientWidth > 776 ? "777px" : "auto" ); /* sets max-width for IE */
}

If you do not want resizing completely then put a "resize:none;" style attribute on the textarea. If you want resizing in a controlled way then add something like max-width: 300px; max-height: 250px; to the text area style.

textarea {
    resize: vertical;
    width: 350px;
    min-height: 80px;
    max-height: 200px;
}

Using this code, the user can resize the textarea vertically. Applying max- and min-height prevents the layout from breaking.