table设置表格有滚动条

转自：http://www.cnblogs.com/mengfangui/p/7027393.html  自己mark一下

<style>
 8             * {
 9                 margin: 0;
10                 padding: 0;
11             }
12             
13             table {
14                 /*设置相邻单元格的边框间的距离*/
15                 border-spacing: 0;
16                 /*表格设置合并边框模型*/
17                 border-collapse: collapse;
18                 text-align: center;
19             }
20             /*关键设置 tbody出现滚动条*/
21             table tbody {
22                 display: block;
23                 height: 80px;
24                 overflow-y: scroll;
25             }
26             
27             table thead,
28             tbody tr {
29                 display: table;
30                 width: 100%;
31                 table-layout: fixed;
32             }
33             /*关键设置：滚动条默认宽度是16px 将thead的宽度减16px*/
34             table thead {
35                 width: calc( 100% - 1em)
36             }
37             
38             
39             table thead th {
40                 background: #ccc;
41             }
42             
43         </style>
44     </head>

44     </head>

在这里标记一下，我自己尝试的时候，在外面包了层div

.countbox { width: 500px; overflow: scroll; margin: 20px; border: 1px solid #eee; }
.countbox table tr th { background-color: #f2f2f2; }
.countbox table tr td { width: 200px; }
.countbox table thead, .countbox table tbody { display: block; overflow-y: scroll; }
.countbox table thead tr, .countbox table tbody tr { display: table; width: 100%; table-layout: fixed; }

这样写，就是thead和tbody一起移动

 

不写这条 .countbox { width: 500px; overflow: scroll; margin: 20px; border: 1px solid #eee; }

写这条.countbox table { margin: 0; width: 100%; table-layout: fixed; }

只有tbody在移动

 

我看到网上有人问怎么让表格头部thead不移动，只有tbody移动，这里标记一下