css - 表格主体内的滚动条方向 RTL

Question

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

玩转 CSS 属性方向

tbody {
  direction : rtl;
}

我发现滚动条确实向左移动了，但列顺序和文本对齐方式也改变了方向。

有什么方法可以保持 tbody 内容的默认方向，只将滚动条放在左侧吗？

JSFiddle link

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

Answer 1

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

是的。您可以动态地重新排序单元格，以便它们读取:

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

    }
            
	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>