固定表头和列

<html>
2

<head>
3

<title>固定表头和列</title>
5

<style>
6

.FixedTitleRow
7

{
8

position: relative;
9

top: expression(this.offsetParent.scrollTop);
10

z-index: 10;
11

background-color: #E6ECF0;
12

}
13

.FixedTitleColumn
15

{
16

position: relative;
17

left: expression(this.parentElement.offsetParent.scrollLeft);
18

}
19

.FixedDataColumn
21

{
22

position: relative;
23

left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);
24

background-color: #E6ECF0;
25

}
26

</style>
27

</head>
28

<body>
29

<div id="scrollDiv" style="width: 300px; overflow: auto; cursor: default; display: inline;
30

position: absolute; height: 200px;">
31

<table id='accountTable' width='500' height='330' cellpadding='0' cellspacing='0'
32

style='table-layout: auto' bordercolor='lightgrey'>
33

<tbody>
34

<tr class="FixedTitleRow">
35

<td class="FixedTitleColumn">
36

姓名</td>
37

<td class="FixedTitleColumn">
38

单位</td>
39

<td class="FixedTitleColumn">
40

工资</td>
41

<td>
42

Descirption0</td>
43

<td>
44

TOL0</td>
45

<td>
46

XS0</td>
47

<td >
48

SS0</td>
49

<td>
50

MS0</td>
51

<td>
52

DS0</td>
53

<td>
54

BS0</td>
55

<td>
56

XL0</td>
57

<td>
58

ML0</td>
59

<td>
60

DL0</td>
61

<td>
62

EM0</td>
63

<td>
64

BM0</td>
65

</tr>
66

<tr>
67

<td class="FixedDataColumn">
68

赖文华</td>
69

<td class="FixedDataColumn">
70

北京中油瑞飞</td>
71

<td >
72

9999RMB</td>
73

<td >
74

88</td>
75

<td >
76

88</td>
77

<td>
78

22</td>
79

<td>
80

22</td>
81

<td>
82

22</td>
83

<td>
84

22</td>
85

<td>
86

22</td>
87

<td>
88

22</td>
89

<td>
90

22</td>
91

<td>
92

22</td>
93

<td>
94

22</td>
95

<td>
96

22</td>
97

</tr>
98

<tr>
99

<td class="FixedDataColumn">
100

赖文华</td>
101

<td class="FixedDataColumn">
102

北京中油瑞飞</td>
103

<td >
104

9999RMB</td>
105

<td >
106

88</td>
107

<td >
108

88</td>
109

<td>
110

22</td>
111

<td>
112

22</td>
113

<td>
114

22</td>
115

<td>
116

22</td>
117

<td>
118

22</td>
119

<td>
120

22</td>
121

<td>
122

22</td>
123

<td>
124

22</td>
125

<td>
126

22</td>
127

<td>
128

22</td>
129

</tr>
130

<tr>
131

<td class="FixedDataColumn">
132

赖文华</td>
133

<td class="FixedDataColumn">
134

北京中油瑞飞</td>
135

<td >
136

9999RMB</td>
137

<td >
138

88</td>
139

<td >
140

88</td>
141

<td>
142

22</td>
143

<td>
144

22</td>
145

<td>
146

22</td>
147

<td>
148

22</td>
149

<td>
150

22</td>
151

<td>
152

22</td>
153

<td>
154

22</td>
155

<td>
156

22</td>
157

<td>
158

22</td>
159

<td>
160

22</td>
161

</tr>
162

<tr>
163

<td class="FixedDataColumn">
164

赖文华</td>
165

<td class="FixedDataColumn">
166

北京中油瑞飞</td>
167

<td >
168

9999RMB</td>
169

<td >
170

88</td>
171

<td >
172

88</td>
173

<td>
174

22</td>
175

<td>
176

22</td>
177

<td>
178

22</td>
179

<td>
180

22</td>
181

<td>
182

22</td>
183

<td>
184

22</td>
185

<td>
186

22</td>
187

<td>
188

22</td>
189

<td>
190

22</td>
191

<td>
192

22</td>
193

</tr>
194

<tr>
195

<td class="FixedDataColumn">
196

赖文华</td>
197

<td class="FixedDataColumn">
198

北京中油瑞飞</td>
199

<td >
200

9999RMB</td>
201

<td >
202

88</td>
203

<td >
204

88</td>
205

<td>
206

22</td>
207

<td>
208

22</td>
209

<td>
210

22</td>
211

<td>
212

22</td>
213

<td>
214

22</td>
215

<td>
216

22</td>
217

<td>
218

22</td>
219

<td>
220

22</td>
221

<td>
222

22</td>
223

<td>
224

22</td>
225

</tr>
226

<tr>
227

<td class="FixedDataColumn">
228

赖文华</td>
229

<td class="FixedDataColumn">
230

北京中油瑞飞</td>
231

<td >
232

9999RMB</td>
233

<td >
234

88</td>
235

<td >
236

88</td>
237

<td>
238

22</td>
239

<td>
240

22</td>
241

<td>
242

22</td>
243

<td>
244

22</td>
245

<td>
246

22</td>
247

<td>
248

22</td>
249

<td>
250

22</td>
251

<td>
252

22</td>
253

<td>
254

22</td>
255

<td>
256

22</td>
257

</tr>
258

<tr>
259

<td class="FixedDataColumn">
260

赖文华</td>
261

<td class="FixedDataColumn">
262

IT民工(小赖)

Anything is possible!(专注.NET) 一个人对于某个领域的理解，领会，实践，都有可能是片面的，沟通是最好的老师，可达到共同提高。

固定表头和列