如何在html css中强制或将垂直滚动条置于前端
我想把这个如何在html css中强制或将垂直滚动条置于前端,html,css,Html,Css,我想把这个垂直滚动条带到前面。这是图片。 我不知道如何设置它 更新 我做了一个变通,但错误的部分是items文本元素没有隐藏在标题后面。这是我的 .container { 位置:绝对位置; 背景:浅蓝色; 身高:100%; 宽度:90%; } .表格标题 { 位置:绝对位置; 高度:25px; 宽度:100%; 背景:红色; } .桌身 { 位置:相对位置; 填充顶部:25px; 溢出:自动; 身高:30%; } 桌子 { 表布局:固定; } 标题 项目1 项目2 项目3 项目4 项目5
垂直滚动条带到前面。这是图片。
我不知道如何设置它
更新
我做了一个变通,但错误的部分是items文本元素没有隐藏在标题后面。这是我的
.container
{
位置:绝对位置;
背景:浅蓝色;
身高:100%;
宽度:90%;
}
.表格标题
{
位置:绝对位置;
高度:25px;
宽度:100%;
背景:红色;
}
.桌身
{
位置:相对位置;
填充顶部:25px;
溢出:自动;
身高:30%;
}
桌子
{
表布局:固定;
}
标题
项目1
项目2
项目3
项目4
项目5
项目6
项目7
您可以使用z-index
将标题带到前面,然后调整标题的宽度以滚动条
.container
{
位置:绝对位置;
背景:浅蓝色;
身高:100%;
宽度:90%;
}
.表格标题
{
位置:绝对位置;
高度:25px;
宽度:96.8%;
背景:红色;
z指数:1;
}
.桌身
{
位置:相对位置;
填充顶部:25px;
溢出:自动;
身高:30%;
}
桌子
{
表布局:固定;
}
标题
项目1
项目2
项目3
项目4
项目5
项目6
项目7
更新
您需要将页边距顶部:25
添加到中,而不是添加填充顶部:25
。表体
这应该行得通。将z-index
添加到表头将解决此问题
.container
{
位置:绝对位置;
背景:浅蓝色;
身高:100%;
宽度:90%;
}
.表格标题
{
位置:绝对位置;
高度:25px;
宽度:100%;
z指数:1000;
背景:红色;
}
.桌身
{
位置:相对位置;
边缘顶部:25px;
溢出:自动;
身高:30%;
}
桌子
{
表布局:固定;
}
标题
项目1
项目2
项目3
项目4
项目5
项目6
项目7
由于滚动条在您的表格上,您无法将滚动条放在表格标题的顶部,而将表格放在表格标题的下方。最好将其从顶部偏移到收割台的高度:
因此,请更改当前表格正文的CSS:
.table-body
{
position: relative;
overflow: auto;
height: 30%;
margin-top: 25px;
}
请查看此图。请显示代码片段或其中间部分或您的网站链接。Thanks@Pranjal不,如果项目列表溢出,我想让它可见我想我这样做了这里是链接,但令人遗憾的是项目文本元素没有隐藏在标题后面在你的链接中它已经在顶部了你在使用什么浏览器?这实际上是我想要的,但仍然有一个问题,如果项目没有溢出怎么办在表体内
?滚动条是隐藏的,但标题宽度保持不变。RRY不明白,您想显示滚动条,即使没有项目也始终显示??不,先生,如果项目溢出,我想显示滚动条,就像在任何常见的表函数中一样,我希望我解释得很好。它显示滚动条是因为有太多的项目超过了主家长的高度我的主要问题是什么先生滚动条隐藏在标题后面,但我想从那时起滚动条出现并隐藏它,当项目在家长内容更新我的答案中没有溢出时。试试看,让我知道:)