Css “为什么边界不可见？”；位置：粘性“；背景色何时存在？

，但它使边界在某些情况下不可见

考虑以下示例：

表格{
边界塌陷：塌陷；
}
泰德{
位置：粘性；
排名：0；
}
th{
背景色：#fff；
右边框：5px纯红；
}

弗斯特
第二
第三

似乎强制回流将部分帮助：

表格{
边界塌陷：塌陷；
}
泰德{
位置：粘性；
排名：0；
}
th{
右边框：5px纯红；
变换：比例（0.999）；
}

弗斯特
第二
第三

我也面临同样的问题。我的解决方法是使用

：after

伪元素来模拟底部边框

th:after{
内容：''；
位置：绝对位置；
左：0；
底部：0；
宽度：100%；
边框底部：1px实心rgba（0,0,0,0.12）；
}

我已经解决了阴影问题

表trth{
职位：-网络工具包粘性；
位置：粘性；
顶部：-1px；
z指数：2；
背景色：白色；
-莫兹盒阴影：0 1px-1px#ccc；
-网络工具包盒阴影：0 1px-1px#ccc；
盒影：0 0 1px-1px#ccc；
}

下一个示例目前在Chrome（65）和Firefox（59）下运行良好

SCSS代码更好地说明了值之间的关系。您可以通过更改变量来设置所需的值

SCSS：

HTML和编译的CSS：

table.sticky-table-head{
边缘底部：1米；
边界塌陷：塌陷；
背景色：#f8fff8；
颜色：#686；
}
桌子。粘桌子头：最后一个孩子{
边缘底部：100vh；
}
表1.2-1-1-1，
table.sticky-table-head td{
边框：2个实心#cdc；
}
表4.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2{
职位：-网络工具包粘性；
位置：粘性；
顶部：1px；
背景色：#红色；
外形：2px实心#8a8；
轮廓偏移：-1px；
}

洛勒姆
乱数假文
多洛·希特·阿梅特
乱数假文
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。
坐
乱数假文
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。
坐
乱数假文
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。
坐
乱数假文
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。
坐
乱数假文
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。
坐
乱数假文
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。
坐
乱数假文
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。
坐
乱数假文
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。
坐
洛勒姆
乱数假文
多洛·希特·阿梅特
乱数假文
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。
坐
乱数假文
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。
坐
乱数假文
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。
坐
乱数假文
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。
坐
乱数假文
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。
坐
乱数假文
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。
坐
乱数假文
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。
坐
乱数假文
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。
坐

如果表中列周围包含边框，并且我们添加了粘性位置， 当我们滚动表格时，显示重叠效果以消除此效果，并 保留边框我们需要删除边框并添加轮廓而不是边框

表trth{
外形：1px实心#e9ecef；
边界：无；
轮廓偏移：-1px；
}

thead:：after{
内容：''；
显示：块；
位置：绝对位置；
右：0；
底部：0；
左：0；
高度：1px；
背景色：#333333；
}

---

我用伪元素而不是边框解决了这个问题。不过，我不知道为什么会发生这种情况。

我的页面中只使用水平边框，因此可能需要根据您的具体情况进行调整。通过对表格单元格使用半透明背景色，我发现是背景的底端覆盖了水平边框。我想垂直边界的右端也是一样的。为了避免边界重叠，我设置了一个线性渐变，填充所有内容，但保留最后一个像素。不幸的是，这只适用于Firefox和Chrome，而不适用于Edge

td：第一个孩子{
位置：粘性；
左：0px；
z指数：2；
背景：线性梯度（至底部、白色、白色钙（100%-1px），
透明钙（100%-1px），透明；
}

边确实绘制了一个线性gra

table {

    &.sticky-table-head {

        // Variables

        $border-width: 2px;

        $head-background-color: #ded;
        $head-border-color: #8a8;

        $background-color: #f8fff8;
        $border-color: #cdc;

        $color: #686;

        // Declarations

        margin-bottom: 1em;
        border-collapse: collapse;
        background-color: $background-color;
        color: $color;

        &:last-child {
            margin-bottom: 100vh;
        }

        th,
        td {
            border: $border-width solid $border-color;
        }

        thead {

            th {
                position: sticky;
                top: ($border-width / 2);
                background-color: $head-background-color;
                outline: $border-width solid $head-border-color;
                outline-offset: (- $border-width / 2);
            }
        }
    }
}

background-clip: padding-box;