Ajax Loader
×
HTML 
 
1
 
2
<div id="demo" class="fixedTable">
3
  <header class="fixedTable-header">
4
    <table class="table table-bordered">
5
      <thead>
6
        <tr>
7
          <th>A</th>
8
          <th>B</th>
9
          <th>C</th>
10
          <th>D</th>
11
          <th>E</th>
12
          <th>F</th>
13
          <th>G</th>
14
          <th>H</th>
15
          <th>I</th>
16
          <th>J</th>
17
          <th>K</th>
18
          <th>L</th>
19
        </tr>
20
      </thead>
21
    </table>
22
  </header>
23
  <aside class="fixedTable-sidebar">
24
    <table class="table table-bordered">
25
      <tbody>
26
        <tr>
27
          <td>14567567465447567467</td>
28
        </tr>
29
        <tr>
30
          <td>2</td>
31
        </tr>
32
        <tr>
33
          <td>3</td>
34
        </tr>
35
        <tr>
36
          <td>4</td>
37
        </tr>
38
        <tr>
39
          <td>5</td>
40
        </tr>
41
        <tr>
42
          <td>6</td>
43
        </tr>
44
        <tr>
45
          <td>7</td>
46
        </tr>
47
        <tr>
48
          <td>8</td>
49
        </tr>
50
        <tr>
51
          <td>9</td>
52
        </tr>
53
        <tr>
54
          <td>10</td>
55
        </tr>
56
        <tr>
57
          <td>11</td>
58
        </tr>
59
        <tr>
60
          <td>12</td>
61
        </tr>
62
        <tr>
63
          <td>13</td>
64
        </tr>
65
        <tr>
66
          <td>14</td>
67
        </tr>
68
        <tr>
69
          <td>15</td>
70
        </tr>
71
        <tr>
72
          <td>16</td>
73
        </tr>
74
        <tr>
75
          <td>17</td>
76
        </tr>
77
        <tr>
78
          <td>18</td>
79
        </tr>
80
        <tr>
81
          <td>19</td>
82
        </tr>
83
      </tbody>
84
    </table>
85
  </aside>
86
  <div class="fixedTable-body">
87
    <table class="table table-bordered">
88
      <tbody>
89
        <tr>
90
          <td>a</td>
91
          <td>b</td>
92
          <td>c</td>
93
          <td>d</td>
94
          <td>e</td>
95
          <td>f</td>
96
          <td>g</td>
97
          <td>h</td>
98
          <td>i</td>
99
          <td>j</td>
100
          <td>k</td>
101
          <td>l</td>
102
        </tr>
103
        <tr>
104
          <td>a</td>
105
          <td>b</td>
106
          <td>c</td>
107
          <td>d</td>
108
          <td>e</td>
109
          <td>f</td>
110
          <td>g</td>
111
          <td>h</td>
112
          <td>i</td>
113
          <td>j</td>
114
          <td>k</td>
115
          <td>l</td>
116
        </tr>
117
        <tr>
118
          <td>a</td>
119
          <td>b</td>
120
          <td>c</td>
121
          <td>d</td>
122
          <td>e</td>
123
          <td>f</td>
124
          <td>g</td>
125
          <td>h</td>
126
          <td>i</td>
127
          <td>j</td>
128
          <td>k</td>
129
          <td>l</td>
130
        </tr>
131
        <tr>
132
          <td>a</td>
133
          <td>b</td>
134
          <td>c</td>
135
          <td>d</td>
136
          <td>e</td>
137
          <td>f</td>
138
          <td>g</td>
139
          <td>h</td>
140
          <td>i</td>
141
          <td>j</td>
142
          <td>k</td>
143
          <td>l</td>
144
        </tr>
145
        <tr>
146
          <td>a</td>
147
          <td>b</td>
148
          <td>c</td>
149
          <td>d</td>
150
          <td>e</td>
151
          <td>f</td>
152
          <td>g</td>
153
          <td>h</td>
154
          <td>i</td>
155
          <td>j</td>
156
          <td>k</td>
157
          <td>l</td>
158
        </tr>
159
        <tr>
160
          <td>a</td>
161
          <td>b</td>
162
          <td>c</td>
163
          <td>d</td>
164
          <td>e</td>
165
          <td>f</td>
166
          <td>g</td>
167
          <td>h</td>
168
          <td>i</td>
169
          <td>j</td>
170
          <td>k</td>
171
          <td>l</td>
172
        </tr>
173
        <tr>
174
          <td>a</td>
175
          <td>b</td>
176
          <td>c</td>
177
          <td>d</td>
178
          <td>e</td>
179
          <td>f</td>
180
          <td>g</td>
181
          <td>h</td>
182
          <td>i</td>
183
          <td>j</td>
184
          <td>k</td>
185
          <td>l</td>
186
        </tr>
187
        <tr>
188
          <td>a</td>
189
          <td>b</td>
190
          <td>c</td>
191
          <td>d</td>
192
          <td>e</td>
193
          <td>f</td>
194
          <td>g</td>
195
          <td>h</td>
196
          <td>i</td>
197
          <td>j</td>
198
          <td>k</td>
199
          <td>l</td>
200
        </tr>
201
        <tr>
202
          <td>a</td>
203
          <td>b</td>
204
          <td>c</td>
205
          <td>d</td>
206
          <td>e</td>
207
          <td>f</td>
208
          <td>g</td>
209
          <td>h</td>
210
          <td>i</td>
211
          <td>j</td>
212
          <td>k</td>
213
          <td>l</td>
214
        </tr>
215
        <tr>
216
          <td>a</td>
217
          <td>b</td>
218
          <td>c</td>
219
          <td>d</td>
220
          <td>e</td>
221
          <td>f</td>
222
          <td>g</td>
223
          <td>h</td>
224
          <td>i</td>
225
          <td>j</td>
226
          <td>k</td>
227
          <td>l</td>
228
        </tr>
229
        <tr>
230
          <td>a</td>
231
          <td>b</td>
232
          <td>c</td>
233
          <td>d</td>
234
          <td>e</td>
235
          <td>f</td>
236
          <td>g</td>
237
          <td>h</td>
238
          <td>i</td>
239
          <td>j</td>
240
          <td>k</td>
241
          <td>l</td>
242
        </tr>
243
        <tr>
244
          <td>a</td>
245
          <td>b</td>
246
          <td>c</td>
247
          <td>d</td>
248
          <td>e</td>
249
          <td>f</td>
250
          <td>g</td>
251
          <td>h</td>
252
          <td>i</td>
253
          <td>j</td>
254
          <td>k</td>
255
          <td>l</td>
256
        </tr>
257
        <tr>
258
          <td>a</td>
259
          <td>b</td>
260
          <td>c</td>
261
          <td>d</td>
262
          <td>e</td>
263
          <td>f</td>
264
          <td>g</td>
265
          <td>h</td>
266
          <td>i</td>
267
          <td>j</td>
268
          <td>k</td>
269
          <td>l</td>
270
        </tr>
271
        <tr>
272
          <td>a</td>
273
          <td>b</td>
274
          <td>c</td>
275
          <td>d</td>
276
          <td>e</td>
277
          <td>f</td>
278
          <td>g</td>
279
          <td>h</td>
280
          <td>i</td>
281
          <td>j</td>
282
          <td>k</td>
283
          <td>l</td>
284
        </tr>
285
        <tr>
286
          <td>a</td>
287
          <td>b</td>
288
          <td>c</td>
289
          <td>d</td>
290
          <td>e</td>
291
          <td>f</td>
292
          <td>g</td>
293
          <td>h</td>
294
          <td>i</td>
295
          <td>j</td>
296
          <td>k</td>
297
          <td>l</td>
298
        </tr>
299
        <tr>
300
          <td>a</td>
301
          <td>b</td>
302
          <td>c</td>
303
          <td>d</td>
304
          <td>e</td>
305
          <td>f</td>
306
          <td>g</td>
307
          <td>h</td>
308
          <td>i</td>
309
          <td>j</td>
310
          <td>k</td>
311
          <td>l</td>
312
        </tr>
313
        <tr>
314
          <td>a</td>
315
          <td>b</td>
316
          <td>c</td>
317
          <td>d</td>
318
          <td>e</td>
319
          <td>f</td>
320
          <td>g</td>
321
          <td>h</td>
322
          <td>i</td>
323
          <td>j</td>
324
          <td>k</td>
325
          <td>l</td>
326
        </tr>
327
      </tbody>
328
    </table>
329
  </div>
330
</div>
 
CSS 
.fixedTable .table {
1
.fixedTable .table {
2
  background-color: white;
3
  width: auto;
4
}
5
.fixedTable .table tr td,
6
.fixedTable .table tr th {
7
  min-width: 100px;
8
  width: 100px;
9
  min-height: 20px;
10
  height: 20px;
11
  padding: 5px;
12
}
13
.fixedTable-header {
14
  width: 510px;
15
  height: 30px;
16
  margin-left: 110px;
17
  overflow: hidden;
18
  border-bottom: 1px solid #CCC;
19
}
20
.fixedTable-sidebar {
21
  width: 110px;
22
  height: 310px;
23
  float: left;
24
  overflow: hidden;
25
  border-right: 1px solid #CCC;
26
}
27
.fixedTable-body {
28
  overflow: auto;
29
  width: 510px;
30
  height: 310px;
31
  float: left;
32
}
33
 
 
JavaScript 
(function() {
1
(function() {
2
  var demo, fixedTable;
3
 
4
  fixedTable = function(el) {
5
    var $body, $header, $sidebar;
6
    $body = $(el).find('.fixedTable-body');
7
    $sidebar = $(el).find('.fixedTable-sidebar table');
8
    $header = $(el).find('.fixedTable-header table');
9
    return $($body).scroll(function() {
10
      $($sidebar).css('margin-top', -$($body).scrollTop());
11
      return $($header).css('margin-left', -$($body).scrollLeft());
12
    });
13
  };
14
 
15
  demo = new fixedTable($('#demo'));
16
 
17
}).call(this);
18
 
 

Untitled

CSSDeck G+