web前端学习

概述

一些table表格相关的css属性

1.边框合并border-collapse

将表格边框和单元格边框折叠为单一边框，即合并边框。

可选值	释义
collapse	如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性
separate	(默认值),边框会被分开。不会忽略 border-spacing 和 empty-cells 属性
inherit	规定应该从父元素继承 border-collapse 属性的值

姓名	学号
张三	123456

姓名	学号
张三	123456

	
.table_test_class{
	border:1px solid #000000;
	border-spacing:5px;
}
.table_test_class td{
	border:1px dashed #000000;
}
#table_test1{
	border-collapse: separate;
}
#table_test2{
	border-collapse: collapse;
}

2.单元格边框距离border-spacing

设置表格中单元格边框之间的距离，仅用于“边框分离”模式。

姓名	学号
张三	123456

姓名	学号
张三	123456

	
#table_test3{
	border-collapse: separate;
	border-spacing: 5px;
}
#table_test4{
	border-collapse: separate;
	border-spacing: 10px;
}

3.标题位置caption-side

设置标题位于表格的顶端或底端。

学号表
姓名	学号
张三	123456

学号表
姓名	学号
张三	123456

	
#table_test5{
	caption-side: bottom;
}
#table_test6{
	caption-side: top;
}