Question

我正在处理表格数据。我使用jQuery修复了表头和左列。它工作正常，但当我滚动表格时，边框闪烁。如果我们应用背景颜色为白色，则隐藏边框。如何在滚动表格时停止闪烁边框。请帮我。提前谢谢。

这是我在JSfiddle中的代码https: //jsfiddle.net/j41acpmx/65/

Answer 1

问题在于相对位置和边界留下闪烁。解决这个问题的两种方法。

第一种方式是使用CSS并从头开始删除表格的第一个边框，并使背景为白色以获得更好的可见性。

第二种方式是在定位固定元素时减去边框宽度。

你当前的边框是2px所以，我从第115行的css top属性中减去了2px。这将推动2个像素。

if(settings.head)
            {
                this.find("thead tr > *").css("top", parseInt(top)-2);
                ...
            }

Answer 2

好的，您也可以将CSS更改为此。添加框插入阴影以解决浮动时丢失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链接：https://jsfiddle.net/af2quek5/

如何冻结表头和左列而不闪烁边框

2 个答案: