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

Question

I'm developing a project in two languages (RTL and LTR) so when I design my tables some 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

Answer 1

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'});
    }
});