Right align and left align text in same HTML table cell
I have a cell in an HTML <table>
. I would like part of the cell contents to be left justified and part to be right justified. Is this possible?
If you want them on separate lines do what Balon said. If you want them on the same lines, do:
<td>
<div style="float:left;width:50%;">this is left</div>
<div style="float:right;width:50%;">this is right</div>
</td>
I came up with this while trying to figure out how to display currency ('$' to left, number to right) in table cells:
<div class="currency">20.34</div>
.currency {
text-align: right;
}
.currency:before {
content: "$";
float: left;
padding-right: 4px;
}
It is possible but how depends on what you are trying to accomplish. If it's this:
| Left-aligned Right-aligned | in one cell then you can use floating divs inside the td tag:
<td>
<div style='float: left; text-align: left'>Left-aligned</div>
<div style='float: right; text-align: right'>Right-aligned</div>
</td>
If it's
| Left-aligned
Right Aligned |
Then Balon's solution is correct.
If it's: | Left-aligned | Right-Aligned |
Then it's:
<td align="left">Left-aligned</td>
<td align="right">Right-Aligned</td>