带背景色的td设置相对定位后部分边框显示不出来

最新推荐文章于 2022-10-12 14:02:59 发布

YuFei_lz

最新推荐文章于 2022-10-12 14:02:59 发布

阅读量1.4k

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/yuanxj123/article/details/101061445

版权

在Firefox浏览器中，遇到表格td元素设置背景色和相对定位后，上下边框显示问题。尝试通过调整属性、使用边框重叠解决，但未达到预期。最终发现只需取消表头的相对定位即可修复。

摘要由CSDN通过智能技术生成

今天在项目中处理表格的过程中遇到了一个让我非常头疼的问题，在火狐浏览（Firefox）器下表格的上边框和下边框消失了，在这里我将我的解决过程记录下来方便回头查看

tr.bgColorTr{
   
    position: relative;
    background-color: #f2f2f2;
    font-weight: 600;
    color: #666;
}

当我这么写的时候，页面显示我的 .bgColorTd 行的下边框和右边框显示不出来，于是我开始上网寻找解决方案
1.第一种使用background-clip属性规定背景的绘制

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

YuFei_lz

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

火狐浏览器中table下边框不显示问题

u012826174的博客

10-08

6195

有问题的代码 <html> <head> <meta charset="UTF-8"> <title>canvas</title> <style type="text/css"> .apply-table { width: 100%; text-align: center;

table用position: sticky固定多层表头，滑动滚动条border边框透明解决方法

m0_54281425的博客

04-28

5717

**问题：**我们发现，只要设置了border边框，这个位置滑动有内容经过就会出现如图的情况。 **解决的方法：**用outline（轮廓）替代border,以达到我们想要的样式。 table thead tr { border: none; outline-color: #fff; outline-style: solid; outline-width: 1px; } outline主要是在元素边框的外围设置轮廓，outline不占据空间，绘制于元素内容周围。同时.

1 条评论您还未登录，请先登录后发表或查看评论

td相对定位不显示边框，使用background-clip解决

aboboo520的博客

12-19

1771

问题是这样的，由于显示需要，设置td为相对定位，却神奇的发现不显示边框了：td { position: relative; border: 1px solid #000; }这个时候你会发现这个边框死活就是不出来，不知道各位攻城狮有没有遇到类似的问题，解决方式的话就是使用background-clip啦，background-clip 属性规定背景的绘制区域，如下： backgro

原生table表格使用background边框被遮挡

ZYX10077的博客

06-04

1160

火狐浏览器中的table使用background边框线被覆盖了导致显示看到的是没有边框线的，其他没有background的就有边框线 // 在td或者th上添加 background-clip属性 // background-clip 设置元素的背景（背景图片或者颜色）是否延申到边框，内边距盒子，内容盒子下面 background-clip: padding-box; 如果是td或者th里面的内容设置了居中不起效果就使用display： table-cell 如果你觉得有帮助到你点一下赞罗！ ...

css 解决table里面td定位边框问题

暖光的博客

07-13

2931

td添加定位之后边框会消失，造成样式不同意添加display:block之后，边框会出来，但是表格的合并边框线不起作用了但是加上如下属性：background-clip:content-box，背景被裁剪到内容框能解决问题 background-clip: content-box; ...

td设置position:relative之后边线消失的问题

aolunnie7927的博客

03-21

662

给td设置了position:relative属性之后，如果td还同时存在背景色，在火狐下面就会有边线消失的情况。解决这个bug有两个方法，一个是设置table的属性为border-collapse: separate;td设置单边线样式。另一个方法是设置background-clip:padding-box;这个方法最简单转载于:https://www.cnblogs.com/a...

table中的th、td边框失效

u014446117的博客

03-23

4835

问题重现：table，设置边框1px solid #ddd，根据th、td，设置不同边框谷歌浏览器正常，火狐浏览器表格边框，均只显示左、上边框解决办法： table, tr, td, th, thead, tbody { position: static;}解决过程：走了很多弯路1）第一反应是width不够，于是尝试给元素增加width。无效2）发现，如果设置极端些，比如border-...

Table显示你要显示的边框代码

12-14

7. **bgcolor**: 设置整个表格的背景色。 8. **background**: 设置表格的背景图像。 9. **bordercolor**: 设置表格边框的颜色，覆盖默认颜色。接下来，我们讨论表格内部分隔线的属性`rules`： 1. **rules=cols**:...

html为内边框加颜色而嵌套TABLE边框不显示出来的两种方法.pdf

10-05

内层表格同样设置`border="0"`，以保持内边框不显示。 ```html 无标题文档 ... ... <td> ... </table></td> ... ``` 总结起来，这两种方法都有效地解决了嵌套表格边框不显示的问题，但实现...

css 解决表格边框不显示的问题

12-09

下面有一个例子，看如下代码，有两处不能显示，有一种解决办法是加个空格，可以解决但不是最理想的。其实只要在表格中加了一句代码就可以。 style="border-collapse: collapse" 复制代码代码如下: <table border=”1″ width=”100%” id=”table1″> <tr> <td>　 </td> <td>　 </td> <td>　 </td> <td>　 </td> </tr> <tr> <td> </td> <td>　 </td> <td> </td> <td>　 </td> </tr> </table>

jQuery 全选/反选以及单击行改变背景色实例

12-09

这部分定义了表格的样式，包括边框、字体大小和颜色，以及选中行的背景色。CSS 代码如下： ```css body { margin: 0; padding: 0; font-size: 12px; font-family: 微软雅黑; } .datagrid { width: 100%; } ....

php table td边框,如何使用html中table实现td边框的效果（代码）

weixin_34391934的博客

04-14

635

今天给大家分享一篇关于HTMLtable各种边框效果实现的文章，内容主要介绍了在HTML利用table设置边框的各种操作，有需要的朋友可以参考一下。table边框测试隐藏右边框隐藏左边框隐藏上边框隐藏下边框显示右边框显示左边框显示上边框显示下边框右边框显示细虚线下边框显示粗虚线上边框显示两条线左边框显示点效果如下：.表格中边框的显示只显示上边框只显示下边框只显示左、右边框只显示上、下边框只...

对于HTML5 position: sticky；

weixin_45044349的博客

01-18

642

在html上我制作table ，且与Excel 相似，并固定头部，头部有边框，但position: sticky;会忽略边框使用代码： .table { height: 758px; /*父级必须有*/ overflow: hidden; overflow-y: auto; padding-right: 7px; } .table thead tr>th { /* 固定头部*/ position

table的表头粘性布局，border不固定问题