<p dir="auto"><code class="notranslate">.text-right</code>, <code class="notranslate">.text-center</code>, <code class="notranslate">.text-left</code> don't have any affect when applied to <code class="notranslate">&lt;td&gt;</code> elements.  I haven't checked, but I assume that's because the CSS specifies <code class="notranslate">p.text-right</code> etc.</p>
<p dir="auto">With the following code, "foo" is aligned to left instead of right</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;table class=&quot;table&quot;&gt;
  &lt;tr&gt;
    &lt;td class=&quot;text-right&quot;&gt;foo&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">table</span> <span class="pl-c1">class</span>="<span class="pl-s">table</span>"<span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">tr</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">td</span> <span class="pl-c1">class</span>="<span class="pl-s">text-right</span>"<span class="pl-kos">&gt;</span>foo<span class="pl-kos">&lt;/</span><span class="pl-ent">td</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;/</span><span class="pl-ent">tr</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">table</span><span class="pl-kos">&gt;</span></pre></div>