【CSS】盒子边框 ③ ( 设置表格细线边框 | 合并相邻边框 border-collapse: collapse； )

韩曙亮

发布于 2023-03-30 19:44:10

5.1K0

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

文章目录

一、设置表格细线边框

一、设置表格细线边框

1、表格示例

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

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>设置表格细线边框</title>
	<base target="_blank"/>
</head>
<body>
	<!-- 表格标签 -->
	<table width="400" align="center">
		<!-- 表格标题标签 -->
		<caption>表格标题</caption>
		<!-- 表格行标签 -->
		<tr>
			<!-- 表格表头单元格标签 -->
			<th>姓名</th>
			<th>年龄</th>
		</tr>
		<tr>
			<!-- 表格普通单元格标签 -->
			<td>Tom</td>
			<td>18</td>
		</tr>
		<tr>
			<!-- 表格普通单元格标签 -->
			<td>Jerry</td>
			<td>16</td>
		</tr>
	</table>
</body>
</html>

显示效果 :

2、合并相邻边框

为 table 设置边框 :

		table {
			border: 1px solid blue;
		}

显示效果 :

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

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

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

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

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

设置

border-collapse: collapse;

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

3、完整代码示例

完整代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>设置表格细线边框</title>
	<base target="_blank"/>
	<style>
		table, th, td {
			border: 1px solid blue;
			
			/* 相邻边框合并在一起 */
			border-collapse: collapse;
		}
	</style>
</head>
<body>
	<!-- 表格标签 -->
	<table width="400" align="center">
		<!-- 表格标题标签 -->
		<caption>表格标题</caption>
		<!-- 表格行标签 -->
		<tr>
			<!-- 表格表头单元格标签 -->
			<th>姓名</th>
			<th>年龄</th>
		</tr>
		<tr>
			<!-- 表格普通单元格标签 -->
			<td>Tom</td>
			<td>18</td>
		</tr>
		<tr>
			<!-- 表格普通单元格标签 -->
			<td>Jerry</td>
			<td>16</td>
		</tr>
	</table>
</body>
</html>

显示效果 :