100% width textarea ignores parent element's width in IE7

Question

I have the following textarea in a table:

<table width="300"><tr><td>

<textarea style="width:100%">
longstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstring
</textarea>

</td></tr></table>

With a long string in the textarea, the textarea stretches out to accommodate it in one line in IE7, but retains its 300px width in other browsers.

Any ideas as to how to fix this in IE?

Answer 1

Apply the width to the td, not the table.

EDIT: @Emmett - the width could just as easily be applied via CSS.

td {
    width: 300px;
}

produces the desired result. Or, if you're using jQuery, you could add the width through script:

$('textarea[width=100%]').parent('td').css('width', '300px');

Point being, there's more than one way to apply a width to a table cell, if development constraints prevent you from applying it directly.

Answer 2

@Peter Meyer, Jim Robert

I tried different overflow values, to no avail.

Experimenting with different values for the wrap attribute and the word-wrap style also wasn't fruitful.

EDIT:

@dansays, seanb

Due to some awkward application-specific constraints, the width can only be applied to the table.

@travis

Setting style="word-break:break-all;" sort of worked! It still wraps differently in IE7 and FF. I'll accept this answer if nothing better comes up.