|
|
$ ~4 p7 G* u% x- l2 U
Table标签的固定 表头和行头 可以在有限的页面中显示超过页面长和宽的多行多列内容。废话不多说，直接上例子：5 N7 x5 [3 w, g9 y7 q% i
9 T, J3 e+ D* A2 U9 Y/ d3 P _<head>
$ }& E/ W3 j8 Q! s9 {- l8 n" E9 s<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 1 j: v; |# O: E
<title>无标题文档</title>
0 G- u/ g7 b. e I3 y K* E! ^' R<style> + l* t$ j+ r/ D
body{font-size:12px;}
9 h1 d& c6 V, ?* U( ?- l8 B .t_n{width:30px; heihgt:240px!important; height:242px; background:buttonface; float:left; border-bottom:1px solid #000; border-left:1px solid #000}
+ T2 s: M6 Q' j# W .t_n span{display:block; text-align:center; line-height:20px; border:1px solid #000; width:28px; height:20px} @. i/ p& H2 S; z$ h
.t_number{border-right:1px solid #000; width:100%; margin-bottom:5px} 7 u: _8 g0 J+ @ k4 n$ |) w! D
.t_number td{border-bottom:1px solid #000; width:30px; height:25px; text-align:center}
3 X$ K2 u. j3 `6 f7 N .dd{height:200px!important; height:208px; overflow-y:hidden;}
~( B* r* k$ Q* J k8 e$ r8 s/ Z, Z6 C) Z+ P% i" f) c, K
.t_i{width:400px; height:auto; float:left; border-right:1px solid #000; border-top:1px solid #000} # ^0 E3 {, F) f/ b8 \! C
.t_i_h{width:100%; overflow-x:hidden; background:buttonface;}
0 k+ W# H7 C. p2 @+ i .ee{width:618px!important; width:620px}
$ j; O$ H4 M. B9 N* A: i3 W .t_i_h table{width:600px;}
( N, Y5 a2 `9 i .t_i_h table td{border-right:1px solid #000; border-bottom:1px solid #000; height:20px; text-align:center} $ b7 v/ y$ u& A- O: c9 u: q; ]' p
.cc{width:100%; height:220px; border-bottom:1px solid #000; border-right:1px solid #000; background:#fff; overflow:auto;} $ [" |: f5 k& Y' ~5 G3 |* V
.cc table{width:600px; }
, z @: ^: f1 R% s2 H .cc table td{height:25px; border-bottom:1px solid #000; border-right:1px solid #000; text-align:center} " K$ k; x" h E) K
</style> 5 K% y* W& K! C+ s& c6 J
<script> ) r) l1 A2 w" d) s2 M0 S: e
function aa(){ . ?/ @+ e) z0 m7 t& `- e) \
var a=document.getElementById("cc").scrollTop; 7 f# Q. r1 ~ a& c# h
var b=document.getElementById("cc").scrollLeft; ( q4 ]2 @! R( G
document.getElementById("dd").scrollTop=a;
3 F" }* y2 R1 X' S, k. Q document.getElementById("hh").scrollLeft=b; ' r1 F& U) T+ R+ s- v) p) N: r
} 8 m8 h z( h1 u0 v8 [! x
</script>
1 i( t4 d) c' H0 Q! u</head>
" }0 j1 V' Q4 P M9 q2 {, e1 U4 q; J$ H y; x3 d: O0 u9 w
<body>
' b; K5 C" }$ @( O<div class="t_n">
1 S3 ?5 D9 _! Y. }2 i <span>序号</span> 9 E' s$ e, Z1 c: g: K4 {; a2 O4 j
<div class="dd" id="dd"> ( k/ A) X6 g7 }! O$ k
<table cellpadding="0" cellspacing="0" border="0" class="t_number">
7 w% J2 C: S: ^1 d! Y( O <tbody>
. @8 [% U: L. U. V. P <tr> ' }4 T$ Y p1 n: E+ v; B
<td>1</td> 7 C) m4 u- `; k% d" j, Q
</tr>
2 \% U' U# {6 n( n1 u <tr> " C6 v) h9 \9 s: X, d. S
<td>2</td> + q8 t) D/ Y- L: U. y& K
</tr> 6 `8 F- m/ M$ J1 w: l
<tr>
% {, Y9 E; ?1 f, _3 Q$ R <td>3</td>
& d8 O2 R3 h+ R q9 B& n. ? </tr>
; P+ A: Y0 P- @! N* H) @9 E/ l <tr>
5 O$ C4 n9 x" @* p$ c <td>4</td> ; X( c( x( j) r* |$ L
</tr>
$ [; ~( a4 N+ r* S6 D6 x9 _ <tr>
- b: m( T& Z$ f: M, D9 f* g <td>5</td> 4 f; t0 y ?0 \
</tr>
/ U6 J1 Q# V z3 n <tr> * u% X8 L8 r$ d
<td>6</td> . |! T7 {8 n+ ^
</tr> + y0 }' D4 b( u5 X; \9 H
<tr>
7 F5 \7 ?# w7 u5 U: w% b+ E <td>7</td>
* U1 X# R w: ? </tr> 8 b1 w3 a. j1 q f
<tr>
) X' t& g4 }3 G1 U- f& x <td>8</td>
) s( K( x/ G& t" t, L+ {; T; d+ K$ Q </tr> ! ^. w `3 v' ^6 s
<tr>
7 o" ]. _' C5 c: u* ~ <td>9</td> 3 S: a9 W5 u& E2 P& U
</tr>
" E4 q; ^, }- q4 Y <tr> " W; N i z1 S( r
<td>10</td>
/ S0 l+ P- p8 R/ C6 v. T </tr>
8 L: G6 Q7 E d% i6 j6 p& S" b <tr>
- S* k9 `2 c9 p% f) b; W0 ]2 i+ I1 G <td>11</td> % Z; x, \' }% m# l8 Y* n+ x
</tr>
% O- L1 `5 \4 N( ]7 z, { <tr>
, [5 o [# k+ I& b; v6 s/ x <td>12</td>
8 ?; `9 e& T9 J p( p/ ? </tr> / g+ E& p) T$ j2 R4 e3 ^6 ?, \
<tr>
, w# z% o* s6 N <td>13</td> ! e; O- j* |+ J! g' V
</tr> + R2 k& ?1 Q9 J) e3 w7 r
<tr>
- U, Q( S( \4 } <td>14</td>
" R5 S3 _: O# ?' _ </tr> + v. n4 o# Z; _8 I, N' J5 H
<tr>
* }8 O! J! v# N" w4 s <td>15</td>
% Q2 ]+ l0 m/ ~0 a# F7 h7 u </tr> 3 T! q% N1 w/ \2 K
<tr>
/ y% F, ~0 Y. V7 A' y <td>16</td> " m/ l* e7 o. V' B9 D$ x- J$ y
</tr> ( y" R! a; S* |5 T
<tr>
( I) z0 Q$ i1 \: G7 P* t4 {9 N$ C1 M9 W <td>17</td>
" |) x; u" C! z' t) i </tr>
. C1 A0 y, p' J7 F e! i <tr> # N: W' w: I* R% d" B' O% p
<td>18</td> 3 T2 s6 f) H) f1 T
</tr> 7 X' J9 Q+ z$ K! J2 J# M
<tr>
/ H3 h- C4 d% k/ W <td>19</td> ' m; m! A ^3 W
</tr> - Q5 y8 M! i4 J F" U8 e
<tr>
; \$ C8 N7 B, d1 w <td>20</td> ) g& y/ K! a0 Y1 r/ R' ^- W: \
</tr>
# Z0 a7 A7 h9 X6 o- {& D </tbody> ) d/ Z3 U: f0 Z ?
</table> S: B3 s" ]$ e8 h) n7 c0 Q5 O2 E
</div> 3 R5 S! P$ @! u8 A1 l$ q
</div>
. B, b; ?& q3 u0 c<!--table栏目-->
7 r9 C0 b; `7 i8 x<div class="t_i">
* j- K- o% q, Q8 r5 T <div class="t_i_h" id="hh"> ) |4 i% s v7 _ z. k% B6 ?. u6 R
<div class="ee"> 9 K/ ~9 Z2 t: C8 h( P2 N
<table cellpadding="0" cellspacing="0" border="0">
u2 p5 e; G3 [3 a9 z" P <tr>
$ O' r7 J# b- z$ d8 z <td width="10%">栏目A</td>
7 I% G7 W5 Y7 R" {/ P <td width="20%">栏目B</td> ; |, c }+ v' h& P. j0 w
<td width="10%">栏目C</td>
6 i$ F7 g" }' i' ^& Y% @! I <td width="20%">栏目D</td>
: P4 m' G# d: ?: L4 v } <td width="20%">栏目E</td> / v' z8 _+ z/ c5 y. f% @$ S
<td width="20%">栏目F</td>
/ P# G0 P& P1 ]' s </tr> & M4 ^* ]6 |# v4 B% `9 S' D
</table>
0 }2 K" p3 C3 s* Z5 E1 D </div>
$ X4 a6 C4 \( d4 [ </div> # T. y4 U5 [4 B1 S" @
<div class="cc" id="cc" onscroll="aa()">
5 \2 Z/ M9 h- i. m; E9 C' _ <table cellpadding="0" cellspacing="0" border="0">
" [) q8 |. G" ~" M% U* V' v <tr>
9 a/ _7 z! b' G- X <td width="10%">1</td> 3 P( i2 g, A( j4 [3 a
<td width="20%">1</td>
7 w" k; G( B0 k+ S <td width="10%">1</td>
: J- H I. F7 A8 m. G3 Q <td width="20%">1</td> 5 I* a" _% Q/ h/ N% x
<td width="20%">1</td> ! ?- W. z0 q: k) m/ J' Y
<td width="20%">1</td>
! |& [* u# _5 _. Z& ? </tr>
& G$ g* J* ?# d2 V* z4 | <tr>
. J& Y5 Y& K+ O% s <td>2</td> ' c& w$ |) w! H. S
<td>2</td> , s+ h# s* i8 `( T1 m8 E
<td>2</td> + O/ W/ k0 i% r' T
<td>2</td> 6 u3 l; N3 c2 _; P8 m0 @) t
<td>2</td>
: s) o3 Z- t, V: Q6 z7 ]8 p <td>2</td>
/ A. X% U% k* h2 i9 Z: A6 K </tr>
* F) Z4 A0 i; z <tr>
3 v) l5 N1 P. f ]) J) l! L <td>3</td>
- g$ R3 F# E1 w+ o, f. O <td>3</td>
/ v* x- K9 C$ n' l% R <td>3</td>
- j- l r; {2 _8 n. J- K1 R0 |* H x <td>3</td> * Q# J! P. m* ]* u
<td>3</td>
" E& S. M; m0 ]7 v! r <td>3</td>
f1 V6 V* g& E </tr>
- W! q1 I/ \4 x/ x2 _1 O0 H: w <tr> : V, x9 F$ `/ P" e1 E0 h f: U
<td>4</td> ) I4 a# E. n; h7 h
<td>4</td> ' ~( d+ t6 d6 Q% n0 A
<td>4</td> 4 V& l3 g- v+ E8 R, X) _2 V
<td>4</td> . ?. P7 D4 |9 Y5 J: B1 D
<td>4</td>
0 d8 m# R, E3 Y" e$ b3 ] <td>4</td> - T( t/ A3 S! O* ]1 N5 O/ E
</tr> & v; E4 L2 I2 O& l% g
<tr>
- D# n3 F9 U2 L+ G& N <td>5</td>
6 |* B7 }) W, j4 c& @5 f <td>5</td> % o3 g. `% V8 O- K6 l" E
<td>5</td> % c; B- U$ v- ~- Q' L, n
<td>5</td> , ^, d5 O) u% f$ V
<td>5</td> ) u* q! p9 ~/ ?. X( f7 K
<td>5</td> + x0 A7 @7 |) f9 u0 @/ L
</tr>
5 W' d- s- N# ~ <tr>
1 J8 {! |- N2 h6 O( `, E+ \9 t <td>6</td>
+ e' [2 d; t: D5 d% ] <td>6</td>
7 w& P x. F: | <td>6</td>
+ A( x- Q. }6 s7 E* d' j. L <td>6</td> 3 k' j5 m0 @- ?% E. `
<td>6</td> , u2 y3 _- L9 C
<td>6</td> - _' {: c7 z* E9 A8 I3 R+ ]
</tr> 0 b/ }( T$ P3 b, w! F
<tr> - z7 U5 H6 O. W; b% s1 B: V5 F
<td>7</td>
9 T; }3 o( k: C x! _4 v4 o9 P1 C <td>7</td> 2 \% u* q4 g, f+ c/ }
<td>7</td> 9 i7 O" }5 G5 x! \; o0 U! d6 e% f, J
<td>7</td> ; W* \) p% r; K) V0 |% m4 F+ X- T9 R9 i
<td>7</td> ( J" x( _- `# ~! ^6 u/ [4 e8 d$ `4 u
<td>7</td> $ F3 T0 S/ p2 W2 r
</tr>
' d' {: P! l- h! h2 ]' f! v, q6 n <tr>
! Q2 U" Y5 a! m8 t5 X9 G <td>8</td> 3 o4 ~8 j' r" I6 Y
<td>8</td>
: w- R j6 e U0 K7 v" r <td>8</td> ! e2 B9 d# G/ U* N
<td>8</td>
! W6 ^5 s: J. W3 @2 B <td>8</td>
8 v6 w, m5 H5 N/ s <td>8</td> / B) ?1 X" @" _4 T0 X6 `
</tr> ' F& f* } h ~8 H$ W; H
<tr>
. Q& G @6 Q7 o/ x9 H8 n <td>9</td> 0 Z" O ?7 B( d. e$ }# g
<td>9</td> 1 }* Y7 R5 i8 E/ ?
<td>9</td>
; K" ~+ w- H) X: B( H <td>9</td> % ?1 D+ B( L% p" Q
<td>9</td> - X" T7 h' C0 g! ~6 y% s5 g
<td>9</td> : F3 ^0 {5 o' r i
</tr> / N# z. Z2 B S) j9 ^. [# S# p& D" n
<tr>
) o; \6 }# U7 c <td>10</td>
1 \+ [8 ~: \; \* W" T1 @# [9 u" N <td>10</td>
" J+ S) t; V0 m( }/ H <td>10</td>
- g2 |: A$ H6 z+ X3 G <td>10</td>
9 C9 N7 q8 Z+ F3 y2 i2 C, H7 O' b <td>10</td> $ S' u, ]& F) _
<td>10</td> 3 y) y/ k1 x+ f' i- C% Z* l' o
</tr> ( g; v. O; V9 l6 M
<tr>
. L: y% E/ Z5 @+ m, F# O <td>11</td> # h. a; U1 m$ |# E5 V7 @- L
<td>11</td>
9 _$ o! i1 c0 z- J$ ^1 [ <td>11</td>
" o6 @; S c+ p& y* t5 S! E: s <td>11</td>
0 m+ y. W( w$ [! e <td>11</td>
/ t ^7 @) z4 O. G( z+ e: o <td>11</td>
3 v/ d1 ?) @' S( V </tr> 4 l* ~) _8 v5 ?: p! n; f
<tr>
2 {7 `2 |2 k3 o- m! t" u <td>12</td>
8 S t- D( S% e/ n# L2 |* T <td>12</td>
# x4 z. [/ Y s+ A( J# ?8 R' T <td>12</td> 9 p$ v; k4 t3 k) D1 z3 r
<td>12</td> z4 t7 k3 a6 ^* @* F
<td>12</td> , W+ r, [/ a' p& g; |- P e
<td>12</td>
Z' C: m$ u9 u- z </tr>
9 Y- x2 K6 o9 N; i <tr>
t5 ]8 @ r- b6 U( o+ A4 ~ <td>13</td> " q7 ?; o( g( p
<td>13</td> 5 Q U: R L# i- |' w
<td>13</td> 6 X1 x1 L) X' V; e7 ~$ V
<td>13</td> 6 `) Y; u4 b9 b2 l* u) M0 z
<td>13</td> . v' R6 p5 t+ N3 h
<td>13</td> ' l" k# N. u1 a& B1 F0 [0 Z+ m
</tr>
+ h9 {/ U3 X% k <tr> " {8 K1 t; Y+ D9 j2 C. D) Z
<td>14</td>
1 e/ c3 P+ v9 R! G$ Y# _ <td>14</td>
F* h3 F% z$ _8 Q+ a# f0 j4 R8 f <td>14</td>
" u2 o! T. C: R$ t- s" u <td>14</td>
9 T' }% m3 n1 I w! j <td>14</td>
9 j/ X$ u! p+ U, u1 o; Q3 f2 H" T <td>14</td> ! U t- E* s: S6 n3 b# s/ Y
</tr> 3 M' U4 Z0 w, Y9 i- d
<tr> 7 p$ d! |( g9 P; _( m
<td>15</td>
' ^% s) I' r1 m7 n# w <td>15</td> % g S" x0 l( n# c) Y* a
<td>15</td> / H! Q8 g% _0 D7 {" ] L1 V
<td>15</td>
& G8 Z% d% T X& ? <td>15</td>
" e- r0 M: t% B* s <td>15</td>
1 o3 u3 O, ?% c. @7 | </tr> 6 {: H1 f3 B& R& c c9 q8 k5 A/ F4 f) ~
<tr> # j q$ S+ F, V6 ]' J' R
<td>16</td> : ?5 {6 r( b6 ?$ _8 }
<td>16</td> 5 ]& _0 h7 [/ J" G! C* s1 C+ z
<td>16</td>
& c9 c, t% }: I" w2 l- N, t/ { <td>16</td>
$ w* P7 r( j; J4 h' ? <td>16</td>
: M; s U( N, D a. O+ | <td>16</td>
& r5 @/ g( N% i: E% T8 R& |+ i3 ] </tr>
" _9 `- [) d. p; [1 M <tr>
5 j' H- s( E9 @ r) s, E <td>17</td>
0 k4 i: {- n" E7 H <td>17</td> 5 U& H# R8 \( C- M3 y$ c3 s* ]- t
<td>17</td>
" a0 ?% K: W7 ~# N( k! W <td>17</td> " B0 v4 X- n7 w. I9 @% C1 u9 C
<td>17</td>
- L0 _1 y$ t, C$ i' U <td>17</td>
: e( P1 M% }' e+ U- E8 [ </tr> , l0 f4 W- I* j- \
<tr> 7 f$ Q4 X) J" C+ Q, F* U
<td>18</td> 9 d1 z( P- a/ k3 j: s; m% Z
<td>18</td> " K# _: P, C: j4 N( ^) N; b( S
<td>18</td>
( U; s& @: u" c+ A, f) q& D/ p <td>18</td>
: |) S5 E" N) x: n" ? <td>18</td>
- k2 o5 }; G2 x, a/ j; ? <td>18</td> 4 |; B, j) i( [" n
</tr> , s3 m! n' Q5 Z% F' {
<tr> ; X) G' [3 G% k, ~+ C
<td>19</td>
/ }" z4 k! U5 J. e2 s <td>19</td> 5 C% U! k2 s; ^+ F& g( J
<td>19</td> ; t2 X. H9 B& N9 @+ _2 o2 \) a
<td>19</td> 2 @3 u6 r+ q- R8 t9 V' B8 ^
<td>19</td>
' }9 [* H3 h. R% g <td>19</td>
* U0 o- K& j" v </tr> ; y" l% K1 R0 _# i+ d8 D
<tr> " S5 z& Q, x$ L) ]$ q
<td>20</td> & j- o/ O: B8 o
<td>20</td>
8 \1 e/ D! |2 @& E; { <td>20</td>
+ A1 S$ j- \9 o+ O8 }- b <td>20</td>
4 [/ t0 ^7 o/ ?( M6 } <td>20</td>
) |) E0 S4 |. V* F) L <td>20</td>
9 F& j- c T4 Q </tr>
2 U/ Q+ O2 Z' L5 d' S </table> ' j5 L+ f B9 x' b: f7 n( A" h
</div>
- Q! v. t/ @: Z7 _0 @</div>
/ Q" [) L7 f/ j# e6 `9 g' R |
|
发表于 2010-8-3 09:17:22
收藏
支持
反对
发表于 2010-8-13 12:35:07