在一个html cssAngular 表中,可以通过overflow-x滚动,有没有办法修复最右边的列?

yhxst69z  于 2022-12-15  发布在  Angular
关注(0)|答案(1)|浏览(129)

在一个可以通过overflow-x滚动的html cssAngular 表中,有没有一种方法可以固定最右边的列,这样当我从左向右滚动时,该列就保持在那里?
我尝试了粘性属性,以及创建两个表紧挨着彼此(这并没有成功地完成任务。我在想我应该覆盖两个表在顶部彼此,但我不知道我应该如何去做这一点。

bhmjp9jg

bhmjp9jg1#

position: sticky在chrome和firefox上运行良好:

div {
  width: 100%;
  overflow: hidden;
  overflow-x: scroll;
}

table, th, td {
  border: 1px solid black;
  background-color: white;
}

table {
  width: 1000px;
}

.sticky-col {
  width: 40px;
  position: sticky;
  right: 0;
}
<div>
<table>
  <tr><th>1</th><th>2</th><th class="sticky-col">3</th></tr>
  <tr><td>1,1</td><td>1,2</td><td class="sticky-col">1,3</td></tr>
  <tr><td>2,1</td><td>2,2</td><td class="sticky-col">2,3</td></tr>
  <tr><td>3,1</td><td>3,2</td><td class="sticky-col">3,3</td></tr>
</table>
</div>

相关问题