bounty将在4天后过期。回答此问题可获得+200声望奖励。mHelpMe正在寻找此问题的更详细的答案。
我有一个表格,第一列保持固定。我希望表格是垂直滚动的。我想我已经接近了,下面的几乎做我想要的,唯一的问题是表格行没有列宽,我不知道为什么?第一个
qybjjes11#
这是@Cristian之前的答案的一个更简洁的版本。它不涉及使用硬编码的大小调整来实现单元格的适当大小,因此无论视口有多宽,表格都会适当地调整大小。基本上,overflow: auto是由bootstrap-table的css设置的,当使用下面的方法时,这会导致表头停止粘贴。作为一种解决方法,我只是将height: 300px移到bootstrap-table容器中(见下面的示例代码),这样表头就可以正确粘贴了。另一种解决方法是在同一个容器元素上设置overflow: unset !important,这将允许表格溢出到文档中。如果不是表格单元格水平溢出,这将是很好的,导致整个文档水平滚动,IMO是超级丑陋的。额外的好处是:第一列也是粘性的,当表格水平滚动时仍然可见。第一个
overflow: auto
height: 300px
overflow: unset !important
0md85ypi2#
我希望这个解决方案是你正在寻找的。基本上,我在table、thead和tbody中添加了position样式,使用z-index在顶部显示head,并在第一列的第一个td中添加了默认宽度,在所有th和td中添加了min-width(您应该可以根据自己的喜好更改这些宽度)。如果你还在期待别的东西,让我知道,也许是可能的。第一个
table
thead
tbody
position
z-index
td
th
min-width
3pmvbmvn3#
这就是我的方法。我在CSS的注解中尽可能多地添加了细节。在一般概念之后,我添加了一些对默认html表格行为的修正。不过,你可以通过删除/添加边框来改进它,但这是如何做的一般想法。第一个
fcwjkofz4#
我认为下面的代码是尽可能简单的。它支持水平滚动和垂直滚动。它保持了每个OP的确切结构。它只依赖于对z索引的一次调整,并且只有当垂直和水平滚动需要粘性列标题和粘性行标题时才需要。在windows 10上的Chrome和Firefox中测试。第一个
4urapxun5#
https://jsfiddle.net/kaxt5wpb/4/我干脆撤了:
tbody{ overflow-y: scroll; height: 200px; width: 100%; position: absolute; }
5条答案
按热度按时间qybjjes11#
这是@Cristian之前的答案的一个更简洁的版本。它不涉及使用硬编码的大小调整来实现单元格的适当大小,因此无论视口有多宽,表格都会适当地调整大小。
基本上,
overflow: auto
是由bootstrap-table的css设置的,当使用下面的方法时,这会导致表头停止粘贴。作为一种解决方法,我只是将height: 300px
移到bootstrap-table容器中(见下面的示例代码),这样表头就可以正确粘贴了。另一种解决方法是在同一个容器元素上设置
overflow: unset !important
,这将允许表格溢出到文档中。如果不是表格单元格水平溢出,这将是很好的,导致整个文档水平滚动,IMO是超级丑陋的。额外的好处是:第一列也是粘性的,当表格水平滚动时仍然可见。
第一个
0md85ypi2#
我希望这个解决方案是你正在寻找的。
基本上,我在
table
、thead
和tbody
中添加了position
样式,使用z-index
在顶部显示head,并在第一列的第一个td
中添加了默认宽度,在所有th
和td
中添加了min-width
(您应该可以根据自己的喜好更改这些宽度)。如果你还在期待别的东西,让我知道,也许是可能的。
第一个
3pmvbmvn3#
这就是我的方法。我在CSS的注解中尽可能多地添加了细节。
在一般概念之后,我添加了一些对默认html表格行为的修正。不过,你可以通过删除/添加边框来改进它,但这是如何做的一般想法。
第一个
fcwjkofz4#
我认为下面的代码是尽可能简单的。它支持水平滚动和垂直滚动。它保持了每个OP的确切结构。它只依赖于对z索引的一次调整,并且只有当垂直和水平滚动需要粘性列标题和粘性行标题时才需要。在windows 10上的Chrome和Firefox中测试。
第一个
4urapxun5#
https://jsfiddle.net/kaxt5wpb/4/
我干脆撤了: