为什么表边距出现错误，当它是dir =“rtl”？ [英] why the table margins go wrong when it is dir="rtl"?
问题描述
当我将页面方向更改为 rtl 时，表边距不正确，如下图
CSS
table，td，tr {
border：2px solid black;
padding：0px;
}
HTML
< body>< table>
< tr>< td>< / td>< td>< / td>< / tr>
< tr>< td>< / td>< td>< / td>< / tr>
< / table>< / body>
这种情况发生在firefox中，但在chrome上，两个方向上的表格都是正确的！
如何解决这个问题？
谢谢。
但是，
在现实中，没有必要给 border 属性到 tr 元素。事实上，除非在非常特殊的情况下，几乎不需要给任何属性 tr 元素。
所以，你可以删除，tr 。
如果你这样做，什么都不会改变 - 表格在LTR模式下仍然是一样的。但它也会在RTL模式下看起来OK。因此，这是您的问题的解决方案。
table，td { border：2px solid black; padding：0px;}
< body dir =rtl > < table> < tr> < td> test< / td>< td> test< / td> < / tr> < tr> < td> test< / td>< td> test< / td> < / tr> < / table>< / body>
when I change the page direction to rtl the table margins is go incorrect,as in this picture
but when I only remove the dir attribute from the page every thing is go correct , as in
CSS
table,td,tr {
border: 2px solid black;
padding:0px;
}
HTML
<body ><table>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table></body>
this happens in firefox but on chrome the table is correct on both directions!
how to solve this issue?
thank you.
As the comments say, it IS a bug.
However.
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">
<table>
<tr> <td>test</td><td>test</td> </tr>
<tr> <td>test</td><td>test</td> </tr>
</table>
</body>
这篇关于为什么表边距出现错误，当它是dir =“rtl”？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
