如何使表与固定列对齐，使表与相邻内容对齐
如何使表与固定列对齐，使表与相邻内容对齐
提问于 2017-09-11 14:10:25
我知道这里有上百个关于固定列、表格中水平滚动的帖子--但大多数都不适合我，或者它们有一些限制，不允许我使用它。我试图解决这个问题，有一个包含所有冻结列的表，我希望有第二个表，它旁边有可滚动的列。但即使过了几个小时，我也搞不懂这事。我到处摆弄许多解决方案--嵌套的表格、容器--都没有成功。我试着向左/向右浮动，但问题是我的表显然太大了，因此总是浮动在下面。
所以我想要实现的是:左边有一个表格，上面有所有冻结的列--有一个包含内容的表格，它可以水平滚动。我如何包装我的两个表来实现这一点？
我使用的是Angular -所以我想用纯HTML/CSS/Angular来做这件事。我也不能使用一些现有的模块，因为这是一个更复杂的解决方案的一部分。
谢谢迈克尔
Stack Overflow用户
回答已采纳
发布于 2017-09-11 14:47:35
您将表的一部分放在一个div中，将可滚动的部分放在另一个div中。在可滚动的div容器上，设置一个宽度或最大宽度，并应用溢出x:滚动或自动。这样，一个部分将固定，另一个部分将滚动。
<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;
}演示柱塞这里
编辑
对于垂直滚动，您只需限制容器的高度，并将overflow设置为滚动，或者，考虑到容器上都有溢出，只需溢出:滚动或自动。
.scrollable{
overflow: scroll;
width: 200px;
height: 70px;
}你有一个工作柱塞这里
如果您想要添加粘性标题稍微复杂一点，请看一下答案这里。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46157753
复制相关文章
相似问题
腾讯云开发者
