Question

我知道这里有数百个关于固定列，表格中的水平滚动的帖子 - 但是大部分都不适合我，或者他们有一些限制，不允许我使用它。我试图解决问题有一个表包含所有冻结的列，我想有一个第二个表旁边有可滚动的列。但即使在几个小时之后，我也无法做到这一点。我玩了许多解决方案 - 嵌套表，容器 - 没有成功。我尝试左/右浮动 - 但问题是我的桌子显然太大了，因此总是漂浮在下面。

所以我想要实现的目标：在左侧有一个带有所有冻结列的表 - 在内容旁边有一个表，可以水平滚动。如何包装我的2个表来实现这个目标？

我正在使用Angular - 所以我想用纯HTML/CSS/Angular来做这件事。我也不能使用一些现有的模块，因为这是更复杂的解决方案的一部分。

由于迈克尔

Answer 1

我的猜测就是这样

＆＃13;

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
}

.table, .content {
  flex: 1 1 auto;
}

.table {
  min-height: 200px;
  background: #bbb;
}

.content {
  overflow-y: auto;
  max-height: 200px;
}

.text {
  min-height: 2000px;
  background: #ddd;
}

＆＃13;

<div class="container">
  <div class="table">
  
  </div>
  <div class="content">
    <div class="text">
    
    </div>
  </div>
</div>

＆＃13;

继续，用文字或内容填充两个矩形，看看它是如何工作的！

Answer 2

您将表格的一部分放在一个div中，将可滚动的部分放在另一个div中。在可滚动div容器上设置宽度或最大宽度并应用overflow-x：scroll或auto。这样一部分将被修复，另一部分将被滚动。

<强> HTML

<div class="fixed">
  //your fixed part of table here
</div>
<div class="scrollable">
  //your scrollable part of table here
</div>

<强> CSS

.scrollable {
  overflow-x: scroll;
  width: 200px;
}

演示plunker here

修改

对于垂直滚动，您只需要限制容器的高度，并设置overflow-x滚动，或者考虑到容器上同时存在溢出，只需要溢出：滚动或自动。

.scrollable{ overflow: scroll; width: 200px; height: 70px; }

你有一个工作的掠夺者here

如果你想添加粘性标题有点复杂，请看一下答案here

如何将表与固定列和表对齐，内容彼此相邻

2 个答案: