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样式之前。

工作示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

表体内的滚动条方向RTL

1 个答案: