Javascript 如何在不闪烁边框的情况下冻结表头和左栏
我正在处理表格数据。我使用jQuery修复了表头和左列。它工作正常,但当我滚动表格时,边框会闪烁。如果我们应用背景色为白色,则边框将隐藏。我们怎样才能在滚动表格时阻止边框的闪烁。请帮帮我。提前谢谢Javascript 如何在不闪烁边框的情况下冻结表头和左栏,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在处理表格数据。我使用jQuery修复了表头和左列。它工作正常,但当我滚动表格时,边框会闪烁。如果我们应用背景色为白色,则边框将隐藏。我们怎样才能在滚动表格时阻止边框的闪烁。请帮帮我。提前谢谢 这里是我在JSfiddlehttps://JSfiddle.net/j41acpmx/65/中的代码,问题在于相对位置和边界被留下,使其闪烁。解决这个问题有两种方法 第一种方法是使用CSS,从开始处删除表格的th边框,并将th背景变为白色以提高可见性 第二种方法是在定位固定th元素时减去边框宽度 您
这里是我在JSfiddle
https://JSfiddle.net/j41acpmx/65/
中的代码,问题在于相对位置和边界被留下,使其闪烁。解决这个问题有两种方法
第一种方法是使用CSS,从开始处删除表格的th边框,并将th背景变为白色以提高可见性
第二种方法是在定位固定th元素时减去边框宽度
您当前的边框是2px,所以,我从第115行的css top属性中减去了2px。这将推高TH2像素
if(settings.head)
{
this.find("thead tr > *").css("top", parseInt(top)-2);
...
}
好的,你也可以把你的CSS改成这个。 将框插入阴影添加到th以解决浮动时缺少2个像素的问题
#parent {
height: 300px;
width: 300px;
}
.table{
border-collapse: collapse;
}
td{
border-top: 2px solid;
background: white;
padding: 5px;
}
th{
background: white;
padding: 5px;
-webkit-box-shadow: inset 0px 2px 0px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: inset 0px 2px 0px 0px rgba(0, 0, 0, 1);
box-shadow: inset 0px 2px 0px 0px rgba(0, 0, 0, 1);
}
Jsfiddle链接:不要仅仅为了绕开Jsfiddle链接中必须包含代码的要求而将URL作为代码发布;取而代之:将您的问题添加到问题的“”代码。链接到实时演示非常有用,所以谢谢你,但是你的代码肯定在你的问题中。嗨..我已经尝试了这两种方法。我需要的表格边框应显示,包括大纲也同时滚动表。问题在于收割台的相对位置。有没有别的办法解决这个问题。。谢谢你的回复如果你想在滚动时为你的thead添加上下边框,你可能会想在th中添加标签并设置边框样式。