一、设置表格细线边框

文章目录

一、设置表格细线边框1、表格示例2、合并相邻边框3、完整代码示例一、设置表格细线边框1、表格示例给定一个 HTML 结构中的表格 , 默认样式如下 :

代码语言：javascript复制

显示效果 :

2、合并相邻边框为 table 设置边框 :

代码语言：javascript复制 table {

border: 1px solid blue;

}显示效果 :

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

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

代码语言：javascript复制 table, th, td {

border: 1px solid blue;

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

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

设置

代码语言：javascript复制border-collapse: collapse;CSS 样式 , 可以 将 相邻的边框 合并在一起 , 合并边框后的效果 :

3、完整代码示例完整代码示例 :

代码语言：javascript复制

显示效果 :