Scrollbar Richtung RTL innerhalb der Tabelle Körper

Question

Ich habe eine HTML-Tabelle mit einem festen Kopf und scrollbaren Körper, und ich möchte die Tabelle Körper Bildlaufleiste auf der linken Seite des Elements zu positionieren.

mit der CSS-Eigenschaft Richtung Spiel

tbody { 
    direction : rtl; 
} 

ich, dass die Scrollbar gefunden in der Tat nach links bewegt wird, aber die Spalten bestellen und die Textausrichtungen Richtungen wechseln auch.

Gibt es eine Möglichkeit, die Standardrichtung für den Inhalt des tbody zu behalten und nur die Bildlaufleiste auf der linken Seite zu platzieren?

JSFiddle link

Irgendwelche Vorschläge mit Hilfe von Javascript sind auch willkommen, aber ich kann JQuery nicht verwenden. Danke im Voraus.

Answer 1

Gibt es eine Möglichkeit, die Standardrichtung für den Inhalt des tbody zu halten und nur die Bildlaufleiste auf der linken Seite zu platzieren?

Ja. Sie können dynamisch neu, um die Zellen, so dass sie lesen:

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

vor dem direction: rtl Stil anwenden.

Arbeitsbeispiel:

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>