Reputation: 27422
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?
Upvotes: 63
Views: 130504
Reputation: 369
For Valamo's answer with a little contribution form my side: use the attribute "nowrap" in the "td" element, and you can remove the "width" specification. Hope it helps.
<td nowrap>
<div style="float:left;">this is left</div>
<div style="float:right;">this is right</div>
</td>
Upvotes: 7
Reputation: 2309
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;
}
Upvotes: 18
Reputation: 763
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>
Upvotes: 14
Reputation: 11587
You could use something like:
<td>
<div style="float:left;width:49%;text-align:left;">this is left</div>
<div style="float:right;width:49%;text-align:right;">this is right</div>
</td>
The 49%
is to give some room for the renderer to wrap things around.
And you can use either <div>
or <span>
Upvotes: 1
Reputation: 10422
td style is not necessary but will make it easier to see this example in browser
<table>
<tr>
<td style="border: 1px solid black; width: 200px;">
<div style="width: 50%; float: left; text-align: left;">left</div>
<div style="width: 50%; float: left; text-align: right;">right</div>
</td>
</tr>
</table>
Upvotes: 2
Reputation: 33809
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>
Upvotes: 97
Reputation: 8410
Do you mean like this?
<!-- ... --->
<td>
this text should be left justified
and this text should be right justified?
</td>
<!-- ... --->
If yes
<!-- ... --->
<td>
<p style="text-align: left;">this text should be left justified</p>
<p style="text-align: right;">and this text should be right justified?</p>
</td>
<!-- ... --->
Upvotes: 3