合并表格边框线

最新推荐文章于 2025-06-29 11:09:31 发布

原创最新推荐文章于 2025-06-29 11:09:31 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

CSS 同时被 2 个专栏收录

8 篇文章

订阅专栏

HTML5

5 篇文章

订阅专栏

本文介绍了两种在HTML中实现表格边框线合并的方法：一种是在table标签内使用rules属性，另一种是在CSS样式中设置border-collapse属性为collapse。这两种方法都能有效解决表格边框线断裂的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一：在html中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		table{
			width:800px; 
			border:1px solid blue;
		}
		td{
			border:1px solid blue;
		}
	</style>
</head>
<body>
	<table rules="all">
	<tr>
		<td>序号</td>
		<td>姓名</td>
		<td>电话</td>
	</tr>
	<tr>
		<td>0001</td>
		<td>小二</td>
		<td>1234567890</td>
	</tr>
	<tr>
		<td>0002</td>
		<td>小三</td>
		<td>1234567890</td>
	</tr>
</table>
</body>
</html>

在 table 标签中添加属性 rules="all" 可合并表格边框线

方法二：在css中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		table{
			width:800px; 
			border:1px solid blue;
			border-collapse:collapse; 
		}
		td{
			border:1px solid blue;
		}
	</style>
</head>
<body>
	<table>
	<tr>
		<td>序号</td>
		<td>姓名</td>
		<td>电话</td>
	</tr>
	<tr>
		<td>0001</td>
		<td>小二</td>
		<td>1234567890</td>
	</tr>
	<tr>
		<td>0002</td>
		<td>小三</td>
		<td>1234567890</td>
	</tr>
</table>
</body>
</html>

在 table 中添加属性 border-collapse:collapse

不信？你试试