How to set rtl in table?

user_4271704 0
Viewed 6530

In my css I use:

body {
    font-weight: 300;
    direction: rtl;
    margin: 0;
}

Also in html I use:

<body dir="rtl">

I have a table bootstrap table like this:

<table align="center" class="table table-striped table-responsive-sm table-bordered">
  <tbody>
    <tr>
      <td style="width: 25%">کد عضویت</td>
      <td>426075</td>
    </tr>
    <tr>
      <td>نام</td>
      <td>سوسن</td>
    </tr>
  </tbody>
</table>

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: https://codepen.io/joehark/pen/yLLeyoG

What mistake I did and how to right aligned my table writings? Do I still need class="text-justify" within each <td>? If yes, what is the purpose of that rtl setting at all?

twitter-bootstrap css html
1 Answers

The direction:rtl is not enough since it affect the align of block elements:

The property sets the base text direction of block-level elements and the direction of embeddings created by the unicode-bidi property. It also sets the default alignment of text, block-level elements, and the direction that cells flow within a table row. Unlike the dir attribute in HTML, the direction property is not inherited from table columns into table cells, since CSS inheritance follows the document tree, and table cells are inside of rows but not inside of columns.

MDN

Use: td {text-align: right; direction: rtl;} in order to set right align text on table's td.

user_65250810
Related