Padding-Right or Padding-Left problem when direction change between RTL and LTR in a table

I'm developing a project in two languages (RTL and LTR) so when I design my tables s开发者_JAVA百科ome TDs must have right or left padding and I when I changes page direction to other, left padding means right and vies-versa and it is my problem because I shoud design my table once for RTl and once for LTR.

My problem:

LTR                  RTL

| Hello| ----> | سلام|

that correct design:

| Hello| ----> |سلام |

Thanks

---

If I understand the question correctly, I think you have two options.

One. create classes for specific directional text and style accordingly. So

<td class="rtl"></td>

and the css

td.rtl{
    direction:rtl;
    padding-left:20px;  //OR WHATEVER
}

And then the opposite for ltr

Two. set the padding one way. Then use jQuery to detect the direction and adjust accordingly.

So something like

$('td').each(function(){
    if($(this).css('direction') == 'rtl'){
        $(this).css({'padding-left':'//whatver','padding-right':'0'});
    }
}); 

---

Solution with Pure CSS

instead of using left or right use *-inline-start and *-inline-end

.ltr { /*default not required*/ }
.rtl { direction: rtl; }

.myClass {
  padding-inline-end: 20px;
  border: 1px solid #222
}

<span class="myClass ltr"> Hello </span>
<hr/>
<span class="myClass rtl"> سلام </span>

https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-start