【CSS】盒子边框 ③ ( 设置表格细线边框

#【CSS】盒子边框 ③ ( 设置表格细线边框 | 来源: 网络整理| 查看: 265

文章目录

一、设置表格细线边框1、表格示例2、合并相邻边框3、完整代码示例一、设置表格细线边框1、表格示例

给定一个 HTML 结构中的表格 , 默认样式如下 :

设置表格细线边框表格标题姓名年龄 Tom 18 Jerry 16

显示效果 :

2、合并相邻边框

为 table 设置边框 :

table { border: 1px solid blue; }

显示效果 :

上述效果只有表格的边框 , 内部的单元格的边框没有设置 ,

为表头单元格 th 和普通单元格 td 设置边框 ;

table, th, td { border: 1px solid blue; }

设置完上述样式后 , 表格显示如下 :

上述单元格与单元格之间的边框 , 单元格与表格之间的边框 , 出现了重叠 , 每个重叠处都有两条线 ;

设置

border-collapse: collapse;

CSS 样式 , 可以将相邻的边框合并在一起 , 合并边框后的效果 :

3、完整代码示例

完整代码示例 :

设置表格细线边框 table, th, td { border: 1px solid blue; /* 相邻边框合并在一起 */ border-collapse: collapse; } 表格标题姓名年龄 Tom 18 Jerry 16

显示效果 :

【本文地址】

今日新闻