Word Wrap Table Prolbem

[Chase Preuninger]

I have a table with some text boxes and I want to add a caption bellow
that text box but my problem is that the text is causing the table to
expand because I want it to dynamically expand to the size of the
textboxes but I don't want it to do so for the text so that the text
appears to be the same width a the textbox.


<table>
<tr>
<td>Your Name</td>
<td><input type="textbox" size="20"/></td>
</tr>
<tr>
<td/>
<td>This is the text which I want to have wrap and not change
the width of the table.</td>
</tr>
</table>

 

[+mrcakey]

I have a table with some text boxes and I want to add a caption bellow
that text box but my problem is that the text is causing the table to
expand because I want it to dynamically expand to the size of the
textboxes but I don't want it to do so for the text so that the text
appears to be the same width a the textbox.


<table>
<tr>
<td>Your Name</td>
<td><input type="textbox" size="20"/></td>
</tr>
<tr>
<td/>
<td>This is the text which I want to have wrap and not change
the width of the table.</td>
</tr>
</table>

<table style="width: 20em">

(Or however large you want to make it.)

+mrcakey

 

[Jukka K. Korpela]

Scripsit +mrcakey:

<table style="width: 20em">

Did you actually try it? It doesn't address the problem posed.

There's no direct solution to the goal of making a table column exactly
as wide as an input box. One needs to work it out the other way around:
set a suitable width for the column, and then set the input box width
roughly equal to the width of the column. It cannot be exactly 100%, due
to box borders.

Example (with several markup errors in the original question fixed,
though they do not directly affect the rendering):

<style type="text/css">
..col1 { padding-right: 1ex;
vertical-align: baseline; }
..col2 { width: 30ex; }
..col2 input { width: 98%; }
td { padding: 0; }
</style>

<table>
<tr>
<td rowspan="2" class="col1"><label for="name">Your
name</label></td>
<td class="col2"><input id="name" type="text" size="30"></td>
</tr>
<tr>
<td class="col2">This is the text which I want to have wrap and
not change the width of the table.</td>
</tr>
</table>