CODEWITHSUNDEEP
html
user12617173
user12617173

Reputation: 127

how can I right align the contents of the second span of this td?

I have an html table with the following td:

            <td className="dataTableCell">
              <span style={{width:20}}>$</span>
              <span style={{float:'right',width:100}}>{this.numberWithCommas(x.Total)}</span>
            </td>

I need to implement a design where the td has a "$" left aligned and the Total amount right-aligned. The "$" displays as expected. I'm not sure what the issue is but the Total amount is not getting right aligned as expected. text-align:'right' doesn't seem to have any effect so I googled and found a reference to using float:'right' but that seems to display the x.Total number on the next line in the td. Any idea what the issue might be here?

Upvotes: 0

Views: 40

Answers (2)

Tymotex
Tymotex

Reputation: 80

You can create a cell like this with this HTML snippet:

<td className="dataTableCell" style="width: 200px;">
      <span>$</span>
      <div style="float: right">99999</div>
</td>

Upvotes: 1

rovac
rovac

Reputation: 2073

One thing you could do is make the parent TD display flex, and justify content space-between like so: 

<td style="display: flex; justify-content: space-between;">
              <span>$</span>
              <span>{this.numberWithCommas(x.Total)}</span>
</td>

Upvotes: 0

Related Questions