火狐浏览器table表格th、td填充背景描边后设置position: relative边框失效问题

objc94 发布于2019-08-30 15:55 / 2163人阅读

摘要：解决方法去掉的背景色，把背景色填充在的上，这样就能完全解决这个问题，如下在火狐浏览器查看效果解决方法给设置一个属性，这样也能完全解决这个问题，如下在火狐浏览器查看效果扩展阅读

一般在开发管理系统的时候经常会用到表格，在使用表格式时通常会给thead部分的th或td加上背景色然后还有边框颜色，在这种情况下浏览器基本都显示正常的，但是当给th或td加上position: relative时火狐浏览器就会显示th或td的边框被遮盖，只显示一片背景色没有边框，如下请在火狐浏览器查看，

在火狐浏览器查看效果

我为什么要在th或td加上position: relative呢，我在开发系统的时候使用bootstrap结合jquery.dataTables，不想使用dataTables自带的图标主题，使用的bootstrap.dataTable 的主题，主题的图标是通过伪类:before和:after实现的，所以加上的position: relative，其实这也是主题的一个小bug，然后导致火狐浏览器只会显示背景色边框完全被遮盖。

解决方法1：

去掉th的背景色，把背景色填充在thend 的 tr上，这样就能完全解决这个问题，如下

.table{
    thead{
        tr{
            background-color: #4587E7;
        }
        th{
            position: relative;
            color: #fff;
        }
    }
}

在火狐浏览器查看效果

解决方法2：

给th设置一个z-index-1属性，这样也能完全解决这个问题，如下

.table{
    thead{
        th{
            position: relative;
            z-index: -1;
            color: #fff;
            background-color: #4587e7;
        }
    }
}

在火狐浏览器查看效果

扩展阅读：http://www.w3help.org/zh-cn/c...

GPU云服务器云服务器 table td问题 th td html html td填充 html 边框填充

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117125.html

css学习归纳总结（二）

摘要：子选择器只对直接后代有影响的选择器，而对孙子后代以及多层后代不产生作用。烂透了尽可能使用复合语法糟糕好的避免不必要的重复糟糕好的组织好的代码格式代码的易读性和易维护性成正比。标签与元素标签和p元素有什么区别呢？大多数时候他们表示的是同一样东西，但仍有细微的区别。、等指的是HTML分隔符，而元素则是由一对开始结束标签构成的，用来包含某一些内容子选择器和后代选择器的区别：后代选择器...

KnewOne 2019-08-28 18:00 评论0 收藏0
Web前端开发规范手册

摘要：规范目的为提高团队协作效率便于后台人员添加功能及前端后期优化维护输出高质量的文档特制订此文档。规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档。文件规范文件命名规则文件名称统一用小写的英文字母、数字和下划线的组合，其中不得包含汉字、空格和特殊字符；命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个...

wua_wua2012 2019-08-22 16:13 评论0 收藏0
Web前端开发规范手册

摘要：规范目的为提高团队协作效率便于后台人员添加功能及前端后期优化维护输出高质量的文档特制订此文档。规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档。文件规范文件命名规则文件名称统一用小写的英文字母、数字和下划线的组合，其中不得包含汉字、空格和特殊字符；命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个...

Tamic 2019-08-02 10:09 评论0 收藏0
Web前端开发规范手册

摘要：规范目的为提高团队协作效率便于后台人员添加功能及前端后期优化维护输出高质量的文档特制订此文档。规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档。文件规范文件命名规则文件名称统一用小写的英文字母、数字和下划线的组合，其中不得包含汉字、空格和特殊字符；命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个...

xiaotianyi 2019-08-30 15:53 评论0 收藏0
[总结]CSS/CSS3常用样式与web移动端资源

摘要：不允许负值用百分比来定义缩放比例。解决这个很简单，在父元素中使用即可解决该。列宽度由单元格内容设定。定义仅有大写字母。不过，要让任何元素生效还得借助于一点点。 css/css3常用样式 CSS修改选中文字的颜色 html代码：第一段文字选中效果第二段文字选中效果 css代码： .p1::selection{background:red;color:#fff;} .p2::selec...

The question 2019-08-28 17:54 评论0 收藏0