表格体内的滚动条方向RTL

Question

我有一个带有固定头部和可滚动主体的HTML表格，我想将表格主体滚动条放置在元素的左侧。

与CSS属性方向

tbody { 
    direction : rtl; 
} 

我发现，滚动条确实向左移动，但列顺序和文字对齐方式切换方向也播放。

有什么办法保持tbody内容的默认方向，只需将滚动条放在左边？

JSFiddle link

使用JavaScript的任何建议，也欢迎，但我不能使用JQuery。提前致谢。

Answer 1

是否有任何方法来保持默认方向为 tbody的内容，并将滚动条放置在左侧？

是的。您可以动态重新排序的细胞，使他们读：

---------------------------------- 
|Cell 5|Cell 4|Cell 3|Cell 2|Cell 1| 
---------------------------------- 

应用direction: rtl样式之前。

工作实例：

function change(){ 
 
    var tableBody = document.getElementsByTagName('tbody')[0]; 
 
    var tableRows = tableBody.getElementsByTagName('tr'); 
 

 
    for (var i = 0; i < tableRows.length; i++) { 
 
     var tableData = tableRows[i].getElementsByTagName('td'); 
 

 
     for (var j = (tableData.length - 1); j > 0; j--) { 
 
      tableRows[i].appendChild(tableData[(j - 1)]); 
 
     } 
 

 
    } 
 
      
 
\t if (tableBody.style.direction === 'ltr' || tableBody.style.direction === '') { 
 
    \t  tableBody.style.direction = 'rtl'; 
 
    } 
 
    
 
    \t else { 
 
    \t  tableBody.style.direction = 'ltr'; 
 
    } 
 
}

table.scroll { 
 
    width: 716px; /* 140px * 5 column + 16px scrollbar width */ 
 
    border-spacing: 0; 
 
    border: 2px solid black; 
 
} 
 

 
table.scroll tbody, 
 
table.scroll thead tr { display: block; } 
 

 
table.scroll tbody { 
 
    height: 100px; 
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
} 
 

 
table.scroll tbody td, 
 
table.scroll thead th { 
 
    width: 140px; 
 
    text-align : left; 
 
} 
 

 
table.scroll thead th:last-child { 
 
    width: 156px; 
 
} 
 

 
thead tr th { 
 
    height: 30px; 
 
    line-height: 30px; 
 
} 
 

 
tbody { border-top: 2px solid black;} 
 

 
#table-body{ 
 
    direction:ltr; 
 
}

<table class="scroll"> 
 
    <thead> 
 
     <tr> 
 
      <th>Head 1</th> 
 
      <th>Head 2</th> 
 
      <th>Head 3</th> 
 
      <th>Head 4</th> 
 
      <th>Head 5</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td>Content 1</td> 
 
      <td>Content 2</td> 
 
      <td>Content 3</td> 
 
      <td>Content 4</td> 
 
      <td>Content 5</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Content 1</td> 
 
      <td>Lorem ipsum dolor sit amet.</td> 
 
      <td>Content 3</td> 
 
      <td>Content 4</td> 
 
      <td>Content 5</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Content 1</td> 
 
      <td>Content 2</td> 
 
      <td>Content 3</td> 
 
      <td>Content 4</td> 
 
      <td>Content 5</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Content 1</td> 
 
      <td>Content 2</td> 
 
      <td>Content 3</td> 
 
      <td>Content 4</td> 
 
      <td>Content 5</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Content 1</td> 
 
      <td>Content 2</td> 
 
      <td>Content 3</td> 
 
      <td>Content 4</td> 
 
      <td>Content 5</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Content 1</td> 
 
      <td>Content 2</td> 
 
      <td>Content 3</td> 
 
      <td>Content 4</td> 
 
      <td>Content 5</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Content 1</td> 
 
      <td>Content 2</td> 
 
      <td>Content 3</td> 
 
      <td>Content 4</td> 
 
      <td>Content 5</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Content 1</td> 
 
      <td>Content 2</td> 
 
      <td>Content 3</td> 
 
      <td>Content 4</td> 
 
      <td>Content 5</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Content 1</td> 
 
      <td>Content 2</td> 
 
      <td>Content 3</td> 
 
      <td>Content 4</td> 
 
      <td>Content 5</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Content 1</td> 
 
      <td>Content 2</td> 
 
      <td>Content 3</td> 
 
      <td>Content 4</td> 
 
      <td>Content 5</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Content 1</td> 
 
      <td>Content 2</td> 
 
      <td>Content 3</td> 
 
      <td>Content 4</td> 
 
      <td>Content 5</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Content 1</td> 
 
      <td>Content 2</td> 
 
      <td>Content 3</td> 
 
      <td>Content 4</td> 
 
      <td>Content 5</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Content 1</td> 
 
      <td>Content 2</td> 
 
      <td>Content 3</td> 
 
      <td>Content 4</td> 
 
      <td>Content 5</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Content 1</td> 
 
      <td>Content 2</td> 
 
      <td>Content 3</td> 
 
      <td>Content 4</td> 
 
      <td>Content 5</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Content 1</td> 
 
      <td>Content 2</td> 
 
      <td>Content 3</td> 
 
      <td>Content 4</td> 
 
      <td>Content 5</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Content 1</td> 
 
      <td>Content 2</td> 
 
      <td>Content 3</td> 
 
      <td>Content 4</td> 
 
      <td>Content 5</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Content 1</td> 
 
      <td>Content 2</td> 
 
      <td>Content 3</td> 
 
      <td>Content 4</td> 
 
      <td>Content 5</td> 
 
     </tr> 
 
    </tbody> 
 
</table> 
 

 
<button onclick="change()" style="margin-top:20px;"> 
 
Change scrollbar direction 
 
</button>