the accountant the accountant - 1 year ago 71
CSS Question

why the table margins go wrong when it is dir="rtl"?

when I change the page direction to

the table margins is go incorrect,as in this picture
enter image description here

but when I only remove the
attribute from the page every thing is go correct , as in
enter image description here


table,td,tr {
border: 2px solid black;


<body ><table>

this happens in firefox but on chrome the table is correct on both directions!

how to solve this issue?

thank you.

Answer Source

As the comments say, it IS a bug.


In reality there is no need to give border properties to tr elements. In fact, there's hardly any need to give any properties to tr elements whatsoever, except in very specialised situations.
So, you can remove the ,tr from the CSS selector.
If you do, nothing will change for the worse - the table will still look the same in LTR mode. But it will also look OK in RTL mode. This, therefore, is the solution to your problem.

table,td {
  border: 2px solid black;
  padding: 0px;
<body dir="rtl">
    <tr> <td>test</td><td>test</td> </tr>
    <tr> <td>test</td><td>test</td> </tr>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download