为table设置滚动条，汇总CSS的overflow属性

做项目的时候有一个需求：让一个table的高度固定，这样多出来的内容需要在竖直方向显示滚动条。

遇到问题：table的宽度已经设置100%,td的宽度已设置。然后无论设置table的高度为多少，都不会出现竖直方向的滚动条。

解决方案：

• 为table设置一个父div,并设置父div的height属性为固定值；
• 为父div设置overflow-y: scroll;

1.overflow属性：CSS2版本，规定当内容溢出元素框时发生的事情。

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

2.overflow-y属性：CSS3版本，规定是否对内容的上/下边缘进行裁剪 - 如果溢出元素内容区域的话。 

语法    overflow-y: visible|hidden|scroll|auto;

	属性值	描述
可选值	visible	内容可见：不裁剪内容，可能会显示在内容框之外。
	hidden	内容隐藏：裁剪内容 - 不提供滚动机制。
	scroll	总是显示滚动条：裁剪内容 - 提供滚动机制。
	auto	如果溢出框，则应该提供滚动机制。
全局可选值	inherit	继承
	initial	默认值
	unset	未设置

3.overflow-x属性：规定是否对内容的左/右边缘进行裁剪。其可取值与overflow-y相同。

note:如果 overflow-y和overflow-x取值相同，则等等同于overflow；如果overflow-y和overflow-x的取值不同，且其中一个属性的值为visible，，而另一个属性值为hidden，scroll，auto，那么visible会被重置为auto。

4.text-overflow 属性：CSS3版本，规定当文本溢出包含元素时发生的事情。

值	描述
clip	修剪文本
ellipsis	显示省略号来代替被修剪的文本
string	使用给定的字符串来代表被修剪的文本