为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|no-display|no-content;

值	描述
visible	不裁剪内容，可能会显示在内容框之外。
hidden	裁剪内容 - 不提供滚动机制。
scroll	裁剪内容 - 提供滚动机制。
auto	如果溢出框，则应该提供滚动机制。
no-display	如果内容不适合内容框，则删除整个框。
no-content	如果内容不适合内容框，则隐藏整个内容。

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

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

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