首先认识一下表格的table-layout属性
tableLayout 属性用来显示表格单元格、行、列的算法规则。
tableLayout有如下三个值：autofixedinherit
注意：
td的text-overflow : ellipsis和overflow : hidden都会起作用，但是这里也有几个地方要注意：text-overflow : ellipsis生效的前提是overflow不为visible，最好是类似hidden的值需要指定table的width如果td的宽度加起来超过table的width，即使给table加上overflow:hidden，td也不会被隐藏。
表格table中thead固定，tbody超出高度出现滚动条，css可进行如下设置
table tbody {display: block;height: 195px;overflow-y: scroll;}table thead,tbody tr {display: table;width: 100%;table-layout: fixed;/*重要 表格固定算法*/}table thead {/*留出滚动条的位置*/width: calc(100% - 1em)}table thead th {background: #ccc;}
例子如下
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>表格table种tbody超出高度加滚动条</title><style>table tbody {display: block;height: 195px;overflow-y: scroll;}table thead,tbody tr {display: table;width: 100%;table-layout: fixed;}table thead {width: calc(100% - 1em)}table thead th {background: #ccc;}</style></head><body><table width="80%" border="1"><thead><tr><th>姓名</th><th>年龄</th><th>出生年月</th><th>手机号码</th><th>单位</th></tr></thead><tbody><tr><td>张三</td><td>18</td><td>1990-9-9</td><td>13682299090</td><td>阿里巴巴</td></tr><tr><td>张三封</td><td>18</td><td>1990-9-9</td><td>13682299090</td><td>阿里巴巴与四十大盗</td></tr><tr><td>张小三</td><td>18</td><td>1990-9-9</td><td>13682299090</td><td>腾讯科技</td></tr><tr><td>张三</td><td>18</td><td>1990-9-9</td><td>13682299090</td><td>浏阳河就业</td></tr><tr><td>张三疯子</td><td>18</td><td>1990-9-9</td><td>13682299090</td><td>阿里巴巴</td></tr><tr><td>张三</td><td>18</td><td>1990-9-9</td><td>13682299090</td><td>阿里巴巴</td></tr><tr><td>张大三</td><td>18</td><td>1990-9-9</td><td>13682299090</td><td>阿里巴巴</td></tr><tr><td>张三五</td><td>18</td><td>1990-9-9</td><td>13682299090</td><td>阿里巴巴</td></tr><tr><td>张刘三</td><td>18</td><td>1990-9-9</td><td>13682299090</td><td>阿里巴巴</td></tr><tr><td>张三</td><td>18</td><td>1990-9-9</td><td>13682299090</td><td>阿里巴巴</td></tr></tbody></table></body></html>
