使用CSS设计一个HTML表格。尝试从下到上和从右到左移动滚动条,并在滚动时保持表头固定。
问题是:
1.滚动将跳至表格的末尾(左下),而不是表格的开头(右上)。
1.表格的标题没有出现在正确的位置,而是通过滚动来移动。
1.如果有一个更好的方法来移动滚动从右到左,比使用CSS中的"方向"属性更好,因为网站允许您选择显示语言,而当您选择一种语言的显示是从右到左,您还必须反转CSS。
如果可能的话,最好从滚动条中去掉表头,但是列的长度是不同的,表头应该与列相匹配。
代码附加,
谢谢!
.table_container {
height: 150px;
width: 400px;
direction: rtl;
overflow: auto;
transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
}
.table_content {
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;
}
th {
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>aaaaa</th>
<th>aaa</th>
<th>aaa</th>
<th>aaa</th>
<th>aaa</th>
</tr>
</thead>
<tbody>
<tr>
<td>bbb</td>
<td>bbbbbbb</td>
<td>bbb</td>
<td>bbb</td>
<td>bbb</td>
</tr>
<tr>
<td>ccc</td>
<td>ccc</td>
<td>ccccccccc</td>
<td>ccc</td>
<td>ccc</td>
</tr>
<tr>
<td>ddd</td>
<td>ddd</td>
<td>ddd</td>
<td>ddddddddddd</td>
<td>ddd</td>
</tr>
<tr>
<td>eee</td>
<td>eee</td>
<td>eee</td>
<td>eee</td>
<td>eeeeeeeeeeeeee</td>
</tr>
</tbody>
</table>
</div>
1条答案
按热度按时间vx6bjr1n1#
没有改造它的工作正常。