html表格中如何设置thtd的边框颜色,表格Table 的Th Td 标签设置背景颜色后边框消失如何解决?...
表格Table的Th Td标签在设置背景颜色后,设置的边框消失了,出现此情况主要是因为 【background】属性 与 【position:relative;】同时使用的缘故。
解决方法:对Th Td 标签增加【background-clip:padding-box;】样式属性即可解决,具体整理如下:
body{font-family:'宋体',Arial,sans-serif;font-size:12px;color:#666;padding:24px;}
p{margin:24px 0 6px 2px;}
.TestTable1{width:200px;border-collapse:collapse;border:2px solid #678;}
.TestTable1 th, .TestTable1 td{height:32px;width:100px;text-align:center;border:1px solid #e66;background:#ded;}
.TestTable1 th, .TestTable1 td{position:relative;}
表格1:同时设置【background】与【position:relative;】样式,框线不显示。
标题1 | 标题2 | 标题3 |
---|---|---|
内容1 | 内容2 | 内容3 |
.TestTable2{width:200px;border-collapse:collapse;border:2px solid #678;}
.TestTable2 th, .TestTable2 td{height:32px;width:100px;text-align:center;border:1px solid #e66;}
.TestTable2 th, .TestTable2 td{position:relative;}
表格2:只设置【position:relative;】样式,框线正常显示。
标题1 | 标题2 | 标题3 |
---|---|---|
内容1 | 内容2 | 内容3 |
.TestTable3{width:200px;border-collapse:collapse;border:2px solid #678;}
.TestTable3 th, .TestTable3 td{height:32px;width:100px;text-align:center;border:1px solid #e66;background:#ded;}
表格3:只设置【background】样式,框线正常显示。
标题1 | 标题2 | 标题3 |
---|---|---|
内容1 | 内容2 | 内容3 |
.TestTable4{width:200px;border-collapse:collapse;border:2px solid #678;}
.TestTable4 th, .TestTable4 td{height:32px;width:100px;text-align:center;border:1px solid #e66;background:#ded;}
.TestTable4 th, .TestTable4 td{position:relative;background-clip:padding-box;}
表格4:同时设置【background】、【position:relative;】、【background-clip:padding-box;】样式,框线正常显示。
标题1 | 标题2 | 标题3 |
---|---|---|
内容1 | 内容2 | 内容3 |
以上代码运行结果如下图所示:
从以上运行结果可以看出,表格4虽然同时设置【background】与【position:relative;】样式属性,但由于添加了【background-clip:padding-box;】样式,框线依然能够正常显示。
CSS3 background-clip 属性简介:
1、浏览器支持情况:
IE9+、Firefox、Opera、Chrome 以及 Safari 支持 background-clip 属性。
注释:Internet Explorer 8 以及更早的版本不支持 background-clip 属性。
2、background-clip语法:
background-clip: border-box|padding-box|content-box;
值
描述
border-box(默认值)
背景被裁剪到边框盒。
padding-box
背景被裁剪到内边距框。
content-box
背景被裁剪到内容框。
html表格中如何设置thtd的边框颜色,表格Table 的Th Td 标签设置背景颜色后边框消失如何解决?...相关推荐
- html%3ctd%3e文本自动换行,如何在表格中自动换行一列,并将表格大小设置为浏览器窗口...
我有一个带有3个"组"的HTML表格,左侧,中间和右侧.如何在表格中自动换行一列,并将表格大小设置为浏览器窗口 +--------------------------------- ...
- excel几个表合成一张_Excel中怎样把多张表格中的数据合并到一张表格中
由于各种需要,我们往往会需要把多张表格中的数据内容合并成一张表格,那么应该怎么操作呢?我们以下为例: 下图中Sheet1是2011年的数据,sheet2是2012年的数据,最后要把它们合并在一张新表上 ...
- 如何在WPS表格中插入一张图片,不影响表格格式
如何在WPS表格中插入一张图片,不影响表格格式 首先把图片复制到表格中 然后将图片缩小到单元格相同大小 右键点击切换为嵌入单元格图片 然后点击图片旁边的+号就可以查看图片
- CSS学习记录3.2/设置标签的背景颜色/控制背景图片的平铺方式/控制背景图片的位置/背景图片关联方式/背景图片和插入图片的区别/捕鱼达人背景练习/精灵图
设置标签的背景颜色: CSS中的background-color:属性,就是专门用来设置标签.bc+table 设置背景图片: CSS中的background-image: url( );的属性就是设 ...
- html在表格中加入虚线框,如何让html表格有虚线边框
可以用CSS样式和HTML标签元素实现,我们选择几个常用标签对齐设置边框虚线效果: 1.html常用标签: p标签 span ul li table tr td 2.实例用到CSS属性单词: bord ...
- androidstudio表格中填充 宽跟长一样_Excel表格的基本操作教程,覆盖表格制作的10大知识!...
Excel表格制作包含的知识比较多,通常制作一张表格需要这10大知识:新建表格.调整行高列宽.插入行列和单元格.删除行列和单元格.移动行列和单元格.表格文字编辑.单元格格式设置.表格边框与单元格边框设 ...
- 怎样在表格中选出同一类_两个表格中重复的
[www.520z-2.com - 话题作文] 篇一:<两个电子表格里如何找相同的名字 补充> 两个电子表格里如何找相同的名字 补充:有表格1和表格2,表格1的C列是名字,表格2的B列是名 ...
- java填充excel表格中_填充导出Java导出excel表格
近期朋友几篇文章介绍了改填充导出的文章. 关联文章的地址 之前做项目的时候需要数据库导出excel格式,由于项目赶没实现,现在分享下如何用java导出excel.话不多说案例如下: 首先要做的是导入一 ...
- qt在表格中如何画线_Qt如何使用表格?(三)
在上一篇中表格已经变得工整了不少,不过看上去还是太素了.在这个看脸的时代这是不行的.那怎么办呢?别担心,Qt最擅长就是干这个了.接下来就用Qt的样式表给表格上点颜色. 我们从表头开始,先给弄它弄个背景 ...
最新文章
- java分布式+高可用_[Java复习] 分布式高可用-Hystrix
- Javascript中匿名函数的多种调用方式
- 台式电脑打不开计算机c盘,电脑电脑C盘打不开怎么办(计算机应用范文)
- Vscode Python输出窗口中文乱码的解决办法
- PCB走线角度为90度到底行不行?
- ae制作数据可视化_我如何精心制作真正可怕的数据可视化
- Guava Cache 使用笔记
- Hibernate的单向N-N关联(四)
- 2021最新抖音H5电玩城游戏平台多玩法模式全套源码
- 【Android -- 学习】学习资料汇总
- Linux网络基础知识
- android版youtube最新版下载,youtube安卓版
- 新能源汽车控制技术分享:VCU整车控制器电控开发
- matlab 画qpsk眼图,MATLABQPSK在AWGN信道下的仿真
- 人脸对齐实现“平均脸”制作
- 【luminate primordial】苏州之行
- 大鱼号短视频如何增加播放量,来提供账号权重,试试这个
- STM32F103C8T6移植uC/OS-III基于HAL库超完整详细过程
- h5(网页) 调用相机拍照和相册,实现图片上传功能
- find() python