Right align and left align text in same HTML table cell

HtmlCss

Html Problem Overview


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?

Html Solutions


Solution 1 - Html

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>

Solution 2 - Html

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;
}

Solution 3 - Html

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>

Solution 4 - Html

Tor 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>

Solution 5 - Html

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>
<!-- ... --->

Solution 6 - Html

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>

Solution 7 - Html

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>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionBrianView Question on Stackoverflow
Solution 1 - HtmlTor ValamoView Answer on Stackoverflow
Solution 2 - HtmlIainView Answer on Stackoverflow
Solution 3 - HtmlJames ThomasView Answer on Stackoverflow
Solution 4 - HtmlSergiuView Answer on Stackoverflow
Solution 5 - HtmlkjagielloView Answer on Stackoverflow
Solution 6 - HtmlLukePView Answer on Stackoverflow
Solution 7 - HtmlPaulo SantosView Answer on Stackoverflow