First of all, you need to understand that, by default, the size of the cell
td
is defined by its inner HTML. If this is text, it will be wrapped as any other text; you don't need anything except limiting the width of this element, then the inner content will try to fit it. The same goes for
label
.
With input, however, it won't work, because it is always one-line. Instead of
input
, you have to use
textarea
.
In my example below, for illustration, I used
td
with both limited and default size, and for visibility, added border, padding, and made the
table
width 100%, so you could see what happens if you change the width of the browser window:
<html>
<head>
<style>
table { width:100%; }
td { border: solid thin black; padding: 1em; }
td.wrappable { width: 10em; }
</style>
</head>
<body>
<table><tr>
<td class="wrappable">This text should be wrappable</td>
<td>1.2</td>
</tr>
<tr>
<td class="wrappable"><textarea>some content</textarea></td>
<td>2.2</td>
</tr></table>
</body>
</html>
By the way, I strongly advise you to quit the habit of using any style-related attributes except, perhaps,
class
. Instead, always use CSS. Also, for most applications, relative units, such as "em" are preferable over absolute units (pixels).
The problem is solved.
—SA