I need to have a few elements in a TD, and this td size is at most %50 of the table, and each line should be aligned to the left, but largest text should be "touching" 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 that, but I'm not being able to align to the left the text "Text1 Second Cell Larger Text" and "Text2 Second Cell".
Any ideas? Also, if there's a better way to do that, I'd love to know!
I just learned how to do it:
.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>
Cheers