如何使表格从右向左滚动

Question

我用overflow-x:auto; 特征：

 table { border-collapse: collapse; width: 150%; } td, th { border: 1px solid #AAA; text-align: center; padding: 3px; }

 <div style="overflow-x:auto;"> <table> <thead> <tr> <th>d</th> <th>c</th> <th>b</th> <th>a</th> </tr> </thead> <tbody> <tr> <td>4</td> <td>3</td> <td>2</td> <td>1</td> </tr> </tbody> </table> </div>

如何使用direction: rtl; 元素使它在屏幕很小时从右向左滚动？

Answer 1

您可以在父级上使用direction:rtl 。 此外，您不需要在代码中手动执行 RTL。 检查已编辑的表格。

 <div style="overflow-x:auto; width: 600px; direction: rtl;"> <table style="width: 700px;"> <style> table { border-collapse: collapse; width: 100%; } td, th { border: 1px solid #AAA; text-align: center; padding: 3px; } </style> <thead> <tr> <th>a</th> <th>b</th> <th>c</th> <th>d</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </tbody> </table> </div>

Answer 2

你可以试试这个 CSS 媒体查询：

<style>
  /* When max width of the screen is 768px */
  @media only screen and (max-width: 768px) {
    div {
      overflow: scroll;
      direction: rtl;
    }
  }
</style>