CSS 如何完美地去除表格的 “双线”

2024-05-11 03:07:55

想必大家在做网页表格的时候一定遇到过这种情况吧

表格出现了“双线”，但是我们需要一个“单线”的表格

比较常用的解决方案

解决方案1：

在表格的样式中添加border-collapse: collapse;以设置边框合并（如果border-collapse的属性值为collapse，则会忽略 border-spacing 和 empty-cells 属性），效果如下：

中间的那一条线特别粗，强迫症表示巨不舒服

解决方案2：

在表格样式中添加border-spacing: 0;（由于HTML5已经放弃cellspacing这个属性，所以用border-spacing: 0;这个样式来代替）以设置相邻单元格边框间的距离为0，效果如下：

表格的底边还是“双线”，没有达到去除“双线”的目的

我的解决方案

以上两种方法都没有很好地解决“双线”这个问题，那么究竟什么方法可以完美地把“双线”这个问题解决呢？

众所周知，在css中，万物皆为盒子，我们可以把表格看成一个大盒子，单元格看成大盒子里的几个小盒子

首先设置表格（大盒子）为黑色（为了区分，我暂时把字改成白色）：

table {background: #000;color: #fff;
}

接着，我们把单元格的背景改成白色（再把字改回黑色）：

td,th {background: #fff;
}

最后我们可以按照我们的需求对表格进行改变

最终的HTML&CSS代码

<!DOCTYPE html>
<html><head> <meta charset="utf-8"> <title>表格</title> <link type="text/css" rel="stylesheet" href="css文件路径"/></head><body><table width="70%"><tr><th>Month</th><th>Savings</th></tr><tr><td align="center">January</td><td align="center">$100</td></tr></table></body>
</html>

table {background: #000;
}
td,th {background: #fff;
}

以上就是《如何完美地去除表格的“双线”》的所有内容，感谢观看

扫码查看前端面试题库小程序

CSS 如何完美地去除表格的 “双线”相关推荐

scss2css vscode设置_VSCode下让CSS文件完美支持SCSS或SASS语法方法
VSCode下让CSS文件完美支持SCSS或SASS语法方法习惯Webpack + PostCSS后, 通常PostCSS都是直接对CSS文件进行处理, 但是大部分习惯SCSS/SASS/LESS的 ...
完美解决html表格表头固定存在的问题
完美解决html表格表头固定存在的问题当表格数据较多出现滚动条时,很多地方都有固定表头的需求.在网上查找资料,发现了一个比较简洁的方法. 代码如下: 1.css样式: th{backgroun ...
css单线边框_HTML table表格边框设置为单线的方法
因为平时在html页面中设计表格样式时,一般都是使用 DIV+CSS 的方式来实现,很少使用 table 表格元素,而今天图省事使用 table 表格元素时,发现设置其边框为的样式为双线的形式,所以就 ...
在PHP中给表格加上css样式,表格CSS样式设置给table表格设置CSS样式表
表格table tr td CSS花色设置给table表格设置CSS花式表在一个网页中多处运用了表格table标签,这个时候给指定的表格对象设置装备摆设款式仿照照旧概略经由CSS发展管束配置. 着 ...
CSS，点击去除虚线边框代码
/*CSS,点击去除虚线边框代码*/ a {outline: none;} a:active {star:expression(this.onFocus=this.blur());} :focus { ...
html设置表格和div的距离,CSS/HTML Div调整大小和表格定位
我有3个div,父div,子div在顶部,另一个在底部.任何帮助将不胜感激,这里是我想达到的目标:CSS/HTML Div调整大小和表格定位当顶格调整大小/增加其大小,包含表将缩小,但保持在其位置上 ...
html如何实现表格效果,DIV+CSS技术实现类似table表格的效果
当前位置:网站首页 >> 网站技术 >> DIV+CSS技术实现类似table表格的效果 [发布人:站长之家发布日期:2015-04-03] 表格在网页制作中使用非常广 ...
html 好看的数据表格,CSS制作好看的网页表格
如果数据表格对于视力没有问题用户都难以阅读的话,那么想像一个那些用辅助技术(掌上设备)的人来说,它们是多么复杂和混乱.幸运的是html规范提供了许多无素和属性来提高数据表格对于这些设备的可访问性. 1 ...
纯css打造漂亮的html表格,table CSS制作好看的网页表格
幸运的是html规范提供了许多无素和属性来提高数据表格对于这些设备的可访问性. 1.summary 和 caption 第一元素是表格的caption,它基本上用做表格的标题.尽管这不是必须有的元素, ...
WPS之excel：批量去除表格内的英文字母
解决问题批量去除表格内的英文字母解决方法 1.第一步,先将要去除字母的那一列复制到word文档,然后替换命令,输入^$ 2.第二步,点击全部替换,然后再复制到原来表格中即可! 大功告成!

最新文章

热门文章