table中cellspacing、cellpadding的css替代写法

最新推荐文章于 2023-11-02 09:32:48 发布

转载最新推荐文章于 2023-11-02 09:32:48 发布 · 446 阅读

文章标签：

#table样式

前端（HTML/CSS）专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用CSS属性border-collapse和border-spacing来优化表格布局。通过调整这些属性,可以实现更美观且紧凑的表格样式。

table{border:0;margin:0;border-collapse:collapse;border-spacing:0;}
/*控制cellspacing*/
table td{padding:0;}                                                                
/*控制cellpadding*/

说明：

border-collapse : separate | collapse
separate :　默认值。边框独立（标准HTML）
collapse :　相邻边被合并

border-spacing : length

设置或检索当表格边框独立（例如当border-collapse属性等于separate时），行和单元格的边框在横向和纵向上的间距。当只指定一个length值时，这个值将作用于横向和纵向上的间距。当指定了全部两个length值时，第一个作用于横向间距，第二个作用于纵向间距。目前IE5.5尚不支持此属性。

好看的表格示例：

table{
	border: solid #add9c0;
	border-width: 1px 0 0 1px;
	margin:0;
	border-collapse:collapse;
	border-spacing:0;
}
td{
	border: solid #add9c0;
	border-width: 0 1px 1px 0;
	padding: 10px;
}