CODEWITHSUNDEEP
javascriptcssjsphtml
Rohit Sharma
Rohit Sharma

Reputation: 141

HTML Div moving text to next line

In my code, I am having hard time to wrap text in last two divs(rate change date & rate adjustment Frequency)

<table>
<tr>
<td> <div> Rate </div> </td>
<td> <div> Rate change date </div> </td>
<td> <div> Rate Adjustment Frequency</div> </td>
</tr>
<tr>
<td> <input type="text"> </td>
<td> <input type="text"></td>
<td> <input type="text"> </td>
</tr>
</table>

"Rate Adjustment Frequency" should be shown on screen like "Rate Adjustment" on first line & "Frequency"(middle) on second line while in case of Rate "Change date" it should wrap like "rate" on the first line & "change date"(middle) on second line

check image if any doubt : my goal

Upvotes: 0

Views: 1677

Answers (4)

Molecular Man
Molecular Man

Reputation: 22386

Maybe not the best solution

<table>
<tr>
<td rowspan="2"> <div> Rate </div> </td>
<td> <div> Rate  </div> </td>
<td> <div> Rate Adjustment </div> </td>
</tr>
<tr>
<td> <div> change date </div> </td>
<td> <div> Frequency</div> </td>
</tr>
<tr>
<td> <input type="text"> </td>
<td> <input type="text"></td>
<td> <input type="text"> </td>
</tr>
</table>

but it works

Upvotes: 0

dknaack
dknaack

Reputation: 60516

here it is:

<table>
<tr>
<td align="center" valign="middle"> <div> Rate </div> </td>
<td align="center" valign="middle"> <div> Rate change<br /> date </div> </td>
<td align="center" valign="middle"> <div> Rate Adjustment<br /> Frequency</div> </td>
</tr>
<tr>
<td> <input type="text"> </td>
<td> <input type="text"></td>
<td> <input type="text"> </td>
</tr>
</table>

Upvotes: 1

Brian Scott
Brian Scott

Reputation: 9371

The problem is that you can't specify at which point the text will wrap. The wrap position depends on the font and text size. If you are looking for the "Adjustment" in "Rate Adjustment Frequency" to be the word that is wrapped underneath then you should wrap the text in a element and style the span to have a smaller width than the div. Reducing the size of the span incrementally will eventually force the "adjustment" to fall into the next line.

Upvotes: 0

jensgram
jensgram

Reputation: 31508

<table>
<tr>
<td> <div> Rate </div> </td>
<td> <div style="text-align: center;"> Rate <br /> change date </div> </td>
<td> <div style="text-align: center;"> Rate Adjustment <br /> Frequency</div> </td>
</tr>
<tr>
<td> <input type="text"> </td>
<td> <input type="text"></td>
<td> <input type="text"> </td>
</tr>
</table>

No?

Upvotes: 0

Related Questions