Scrollbar direction RTL inside table body

Question

I have an HTML table with a fixed head and scrollable body, and i would like to position the table body scrollbar on the left side of the element.

Playing with the CSS property direction

tbody {
  direction : rtl;
}

I found that the scrollbar is indeed moved to the left, but the columns order and the text alignments switch directions also.

Is there any way to keep the default direction for content of the tbody and just place the scrollbar on the left?

JSFiddle link

Any suggestions using javascript are also welcome, but i cannot use JQuery. Thanks in advance.

Answer 1

Is there any way to keep the default direction for content of the tbody and just place the scrollbar on the left?

Yes. You can dynamically re-order the cells so that they read:

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

before applying the direction: rtl style.

Working Example:

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)]);
        }

    }
            
	if (tableBody.style.direction === 'ltr' || tableBody.style.direction === '') {
  	    tableBody.style.direction = 'rtl';
    }
    
 	else {
  	    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>