主要问题是:
将滚动条设置为顶部和左侧,并将表头设置为粘性后,表头在滚动时仍然移动。
还有一些不太重要的问题:
如果有一个更好的方法来设置左滚动,比使用"方向" CSS属性更好,因为该网站允许选择显示语言,而当选择一种语言,其中显示是从右到左,因为当前的"方向"有必要扭转CSS。
如果可能的话,最好从滚动条中去掉表头,但是列的长度是不同的,表头应该与列相匹配。
代码附加,
谢谢!
const table_container = document.getElementsByClassName("table_container")[0];
// Align the horizontal scroll bar to the left
table_container.scrollLeft = -table_container.scrollWidth;
// Align the vertical scroll bar to the top
table_container.scrollTop = table_container.scrollHeight;
.table_container {
height: 150px;
width: 400px;
overflow: auto;
/* Align the horizontal scroll bar to the left */
direction: rtl;
/* Align the vertical scroll bar to the top */
transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
}
.table_content {
/* Align text after flipping */
direction: ltr;
transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
}
table {
overflow: auto;
border-collapse: collapse;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: bisque;
}
th,
td {
border: 1px solid #ddd;
padding: 0.5rem;
text-align: start;
vertical-align: top;
}
thead {
background-color: lightblue;
position: sticky;
top: 0;
z-index: 1;
}
td {
white-space: nowrap;
}
<div class="table_container ">
<table class="table_content">
<thead>
<tr>
<th>aaaaa1</th>
<th>aaa</th>
<th>aaa</th>
<th>aaa</th>
<th>aaa</th>
</tr>
</thead>
<tbody>
<tr>
<td>bbb1</td>
<td>bbbbbbb</td>
<td>bbb</td>
<td>bbb</td>
<td>bbb</td>
</tr>
<tr>
<td>ccc1</td>
<td>ccc</td>
<td>ccccccccc</td>
<td>ccc</td>
<td>ccc</td>
</tr>
<tr>
<td>ddd1</td>
<td>ddd</td>
<td>ddd</td>
<td>ddddddddddd</td>
<td>ddd</td>
</tr>
<tr>
<td>eee1</td>
<td>eee</td>
<td>eee</td>
<td>eee</td>
<td>eeeeeeeeeeeeee</td>
</tr>
</tbody>
</table>
</div>
1条答案
按热度按时间jdzmm42g1#
没有改造它的工作正常。