How to align multiple lines of text in one td

Question

I need to have several elements in TD, and this size td is not more than% 50 of the table, and each row should be left aligned, but the largest text should “touch” the right side of the table.

<table width="100%" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="line-height: 20px; width: 49%;"> <span style=" color: #FF00FF !important; font-size: 12pt; font-weight: bold;">Text First Cell </span> </td> <td style="width: 50%; text-align: right;"> <span name="span1" style="float: left; width: 100%;"> <span style="font-family: Arial !important; color: #FF00FF ; font-size: 12pt; font-weight: bold;">Text1 Second Cell Larger Text </span> </span> <span name="span2" style="width: 100%; float: left;"> <span style="font-family: Arial ; color: #FF00FF ; font-size: 12pt; font-weight: bold;"> Text2 Second Cell </span> </span> </td> </tr> </tbody> </table> 

I can almost do this, but I cannot align the text "Text1 Second Cell Larger Text" and "Text2 Second Cell" to the left.

Any ideas? Also, if there is a better way to do this, I would like to know!

Answer 1

I just found out how to do this:

 .myDiv { float: right; } .span1{ display: block; } <div class="myDiv"> <span name="span1" class="span1" > <span style="font-family: Arial !important; color: #FF00FF ; font-size: 12pt; font-weight: bold;">Text1 Second Cell Larger Text </span> </span> <span name="span2" class="span2"> <span style="font-family: Arial ; color: #FF00FF ; font-size: 12pt; font-weight: bold;"> Text2 Second Cell</span> </span> </div> 

Greetings

Answer 2

I assume that you have text alignment problems because they are in the same cell. I would suggest creating multiple cells in a table to make it easier.

Example:

 <table border=0 width=546 style='table-layout:fixed'> <col width=67> <col width=75> <col width=41> <tr> <td width="147" rowspan="2"><span style="line-height: 20px; width: 49%;"> <span style=" color: #FF00FF !important; font-size: 12pt; font-weight:bold;"> Text First Cell </span> </span></td> <td width="389"><div align="right"> <span style="font-family: Arial !important; color: #FF00FF ; font-size: 12pt; font-weight: bold;"> Text1 Second Cell Larger Text </span></div></td> </tr> <tr> <td><span style="font-family: Arial ; color: #FF00FF ; font-size: 12pt; font-weight: bold;"> Text2 Second Cell </span></td> </tr> </table>