table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。

找了好久才找到一篇可以简单粗暴就能用的，所以拿过来算是收藏了。里面有一个css2里的命令是我没用过的也是这里面关键的：table-layout:fixed;

原理很简单，有爱研究的童鞋可以去css官网看看说明文档。

直接贴代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>转载自·威易网CSS教程</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>

　　转载自：http://www.cnblogs.com/webSong/p/6242444.html

posted @   幽竹小妖  阅读(1454)  评论(0)  编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示