---

一、表头设置圆角

思路：对 thead 中的 第一个单元格 和 最后一个单元格 设置 border-radius 。

代码：

table {
	border-collapse: separate;
	empty-cells:hide;
}
table thead tr th:first-child {
	border-top-left-radius: 7px;
}

table thead tr th:last-child {
	border-bottom-right-radius: 7px;
}
1
2
3
4
5
6
7
8
9
10
11

效果：

注意：

• 不要对table设置 border-collapse: collapse; 这个属性，会造成 border-radius 不生效；
• 如果想对 tbody 中的 单元格 设置圆角，思路相同。

二、设置行之间的上下距离

思路：通过设置 border-spacing 属性。
代码：

table {
	border-collapse: separate;
	empty-cells: hide;
	border-spacing: 0 20px;
}
1
2
3
4
5

效果：
注意：border-spacing 属性若设置一个值，则单元格上下左右的四个方向都会生效；
若设置两个值，第一个值代表左右的间距，第二个值代表上下的间距。

三、表头固定，表格内容添加滚动条

思路：table元素外层包裹一个 div元素 ，对它设置 max-height 和 overflow-y 属性；再对表头设置 fixed 定位，再调整距离即可。

代码：

<style>
	.table-wrapper {
		margin: 100px auto;
		width: 1024px;
		max-height: 450px;
		overflow-y: auto;
	}

  
	table thead {
		width: 1024px;
		height: 40px;
		background-color: #ddd;
		position: fixed;
		top: 78px;
	}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

效果：

注意：将thead设置为 fixed 定位后，可能会造成 thead 以及里面单元格的样式错乱问题，需要手动调整thead的宽高top属性以及里面th元素的宽度。