title: How to set rtl in table?
body: <p>In my css I use:</p>
  
  <pre><code>body {
      font-weight: 300;
      direction: rtl;
      margin: 0;
  }
  </code></pre>
  
  <p>Also in html I use:</p>
  
  <pre><code>&lt;body dir="rtl"&gt;
  </code></pre>
  
  <p>I have a table bootstrap table like this:</p>
  
  <pre><code>&lt;table align="center" class="table table-striped table-responsive-sm table-bordered"&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td style="width: 25%"&gt;کد عضویت&lt;/td&gt;
        &lt;td&gt;426075&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;نام&lt;/td&gt;
        &lt;td&gt;سوسن&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>But all my writings are still left aligned instead of right aligned, regardless I used rtl. A full source codepen and page view is at: <a href="https://codepen.io/joehark/pen/yLLeyoG" rel="nofollow noreferrer">https://codepen.io/joehark/pen/yLLeyoG</a></p>
  
  <p>What mistake I did and how to right aligned my table writings? Do I still need <code>class="text-justify"</code> within each <code>&lt;td&gt;</code>? If yes, what is the purpose of that rtl setting at all?</p>