Text align right distinctly without using position:relative

user_15395740 0
Viewed 43

I have a table and I want all the ab's to line up (ie I want to shift some columns 2 characters left) as shown below where I used non-breaking-spaces (why do I need four?)
But I want to achieve this using only classes and if necessary, spans. I tried using margin-right on an internal span, or padding-right on the td, but both seem to revert to text-align: left. I do not want to use position:absolute.

td {
    text-align: right;
}

td .b {
    margin-right: 2em;
}

td.c {
    /*padding-right: 2em;*/
}
<table>
    <tr>
        <td>12ab34</td>
    </tr>
    <tr>
        <td>ab34</td>
    </tr>
    <tr>
        <td>ab34</td>
    </tr>
    <tr>
        <td>ab&nbsp;&nbsp;&nbsp;&nbsp;</td>
    </tr>
</table>
<br>

<table>
    <tr>
        <td><span class="a">12ab34</span></td>
    </tr>
    <tr>
        <td><span class="a">ab34</span></td>
    </tr>
    <tr>
        <td><span class="a">ab34</span></td>
    </tr>
    <tr>
        <td class="c"><span class="b">ab</span></td>
    </tr>
</table>

css html
1 Answers

"...I used non-breaking-spaces (why do I need four?)"

A non-breaking space width is roughly 25% of an em. So going off of the first <table> you can use a right margin of 1em (see Figure I).

Figure I

.b {margin-right: 1em}

Another way is to use spacing like you did with &nbsp; but with an em space as content of an ::after pseudo-class. (see Figure II)

Figure II

.d::after {
  content: '\002003';
}


td {
  text-align: right
}

td .b {
  margin-right: 1em;
}

td.c {
  /*padding-right: 2em;*/
}

.d::after {
  content: '\002003';
}
<table>
  <tr><td>12ab34</td></tr>
  <tr><td>ab34</td></tr>
  <tr><td>ab34</td></tr>
  <tr><td>ab&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>  
</table><br>

<table>
  <tr><td><span class="a">12ab34</span></td></tr>
  <tr><td><span class="a">ab34</span></td></tr>
  <tr><td><span class="a">ab34</span></td></tr>
  <tr><td class="c"><span class="b">ab</span></td></tr>  
</table><br>

<table>
  <tr><td>12ab34</td></tr>
  <tr><td>ab34</td></tr>
  <tr><td>ab34</td></tr>
  <tr><td class='d'>ab</td></tr>  
</table>

user_28132240
Related