html - 如何对齐固定列的表格和内容相邻的表格

Question

我知道这里有数百篇关于固定列、表格中水平滚动的帖子 - 但其中大部分对我不起作用，或者它们有一些限制不允许我使用它。我试图解决这个问题有一个包含所有卡住列的表，我想在旁边有一个具有可滚动列的第二个表。但即使下类后，我也无法正常工作。我试过很多解决方案——嵌套表、容器——都没有成功。我试过向左/向右浮动 - 但问题是我的 table 显然太大了，因此总是 float 在下面。

所以我想要实现的所有目标:在左侧有一个包含所有卡住列的表格 - 在内容旁边有一个表格并且可以水平滚动。我怎样才能包装我的 2 个表来实现这一点？

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

谢谢 迈克尔

Answer 1

您将表格的一部分放在一个 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;
}

演示插件 here

编辑

对于垂直滚动，您只需要限制容器的高度，并将 overflow-x 设置为滚动，或者，考虑到您在容器上同时拥有这两个，只需溢出:滚动或自动。

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

你有一个工作的 plunker here

如果要加sticky header有点复杂，看看答案here