スクロールバーの方向RTL in table body

Question

固定ヘッドとスクロール可能なボディを持つHTMLテーブルがあり、要素の左側にテーブル本体スクロールバーを配置したいと思います。私は、スクロールバーが実際に左に移動されますが、列が注文し、テキストの整列にも方向を切り替えることがわかっ

tbody { 
    direction : rtl; 
} 

CSSプロパティ方向と遊ぶ

。

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>