|
|
4 i8 z9 ~# ~5 z! ]
Table标签的固定 表头和行头 可以在有限的页面中显示超过页面长和宽的多行多列内容。废话不多说，直接上例子：) A e+ D% ?! y% U4 G
# @2 z. \. h3 v9 |. p5 w/ g<head>
* I! g) S) R. Y, G- a8 Y<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
% o; P. r0 n* m# j+ A9 b<title>无标题文档</title> $ ^* A4 _4 X4 ?. h
<style> % h8 v) d5 R8 B, U
body{font-size:12px;}
' S `$ p1 U/ {- \& P0 d% { .t_n{width:30px; heihgt:240px!important; height:242px; background:buttonface; float:left; border-bottom:1px solid #000; border-left:1px solid #000}
! _+ M* \( G T. b0 W .t_n span{display:block; text-align:center; line-height:20px; border:1px solid #000; width:28px; height:20px}
' @% D: g8 V* | .t_number{border-right:1px solid #000; width:100%; margin-bottom:5px}
. G, N4 ?5 X" N' Q) } .t_number td{border-bottom:1px solid #000; width:30px; height:25px; text-align:center} - {, n/ y0 T6 {& A3 ~7 V
.dd{height:200px!important; height:208px; overflow-y:hidden;}
; T* z) ]1 v; d& D* q9 G- `: C8 S: L: E% ^, z3 y" C. ?. {
.t_i{width:400px; height:auto; float:left; border-right:1px solid #000; border-top:1px solid #000}
) ?( q7 _" E- P N% c* ]$ A .t_i_h{width:100%; overflow-x:hidden; background:buttonface;}
3 l0 c) Z2 u. f* M; m3 L .ee{width:618px!important; width:620px}
$ s o7 ]: I2 C! X/ P9 l .t_i_h table{width:600px;} ( G$ `& i4 }/ V" L a
.t_i_h table td{border-right:1px solid #000; border-bottom:1px solid #000; height:20px; text-align:center}
/ l8 e% t \( w# M4 z. I, \ .cc{width:100%; height:220px; border-bottom:1px solid #000; border-right:1px solid #000; background:#fff; overflow:auto;} . R- L/ J* R& c! A- m3 R3 I. O
.cc table{width:600px; }
$ ~/ P7 T. i! x! V, X .cc table td{height:25px; border-bottom:1px solid #000; border-right:1px solid #000; text-align:center}
( X* R# {! k5 W& k9 Y</style>
% q6 J5 m" m1 c' U4 [+ L; o<script> . G1 Z M+ S% }) m" u, n. l# n/ U# y
function aa(){
, ]+ y' A, m& N- }- q2 x/ N3 f var a=document.getElementById("cc").scrollTop;
8 A; P6 `3 {/ F# J2 c# W. \9 v var b=document.getElementById("cc").scrollLeft; ' K9 ]$ \6 i4 x) ~6 ?6 a
document.getElementById("dd").scrollTop=a; ' q! m$ e9 u$ |" ]
document.getElementById("hh").scrollLeft=b; 2 W& q; W$ Q' B7 {, c
}
/ |2 W4 `) Q6 ~% Y4 g</script> 1 w/ |5 a+ b; J3 v; A
</head> 0 ^2 W9 f ^" w+ s: C
$ ^$ e& V# u0 p% Q: l<body>
/ N* v1 n1 I/ p4 A7 q$ A" n& t<div class="t_n">
: {: P6 F- r8 r <span>序号</span>
6 W" E6 O5 N* D2 s <div class="dd" id="dd"> * d# H; A4 _% w
<table cellpadding="0" cellspacing="0" border="0" class="t_number">
5 J- R& l9 |7 Z3 Z5 L <tbody> ) d; p2 |! H/ n4 E+ b# n+ _
<tr> ; w+ e* Z6 W& ^1 V( j
<td>1</td> & m% X, g& k% W/ T u* y
</tr> 7 A6 O" v& V8 x5 f0 |! j
<tr>
- b3 a7 \+ Q+ {$ Y" d7 ]$ ? <td>2</td> ( c: Y8 D7 ^( N2 h4 ]
</tr>
. w" M. ~3 |& u8 e6 }+ U <tr> % v1 o6 {9 F4 a8 e! R& ?( r- O
<td>3</td>
9 v" l& S2 X M/ _4 p( s </tr> 3 A; a/ g* F/ x* f$ N! p0 z* J
<tr> 8 F2 T: j. \. A" S: L' `
<td>4</td>
* S& D/ ^0 l) ^( s# W& q9 ? </tr>
% H; s3 X, S1 g- J4 \% ]! W2 q <tr> # c" F S7 f' {, H _$ J
<td>5</td> 4 ~5 G3 d& X* ]; l% d& x& O% y
</tr> " ?/ x- m) x' D. D
<tr> # d9 C' G) [: A Z9 Z- A+ u
<td>6</td> 5 h$ U( l2 S. S
</tr>
$ C/ b+ k; a7 f0 V+ z <tr>
. ^5 f' u$ @2 u" w <td>7</td>
2 J0 _/ K1 j2 o' d: R/ | </tr> / ~5 O( @; x3 R
<tr>
# C$ B# h6 |1 k" t0 v% N <td>8</td>
& E6 k7 P' r/ \7 F6 a2 l$ u0 j9 @ </tr> + Y) D/ }$ T+ b+ V
<tr> 9 J, W) }3 W5 h* l5 M' P) ?6 x
<td>9</td> " V5 q8 e/ B9 |) C! z, ?( H7 H+ z
</tr> 5 [0 |* q, D$ g( t5 v& l; o0 I2 R
<tr> 3 y2 t8 D0 S: V8 H: {0 j( O
<td>10</td> % a* j' y1 h. q2 E* j
</tr>
3 @( l. J; j5 g& ? \. k& u8 K1 Q$ \ <tr>
' q+ @' F) E) ]3 c; K0 f! ?1 n! a <td>11</td> # C7 _7 j( B* j/ `
</tr>
6 m h6 T" P3 `) L2 ^4 q <tr>
" r* o3 W: n; \" w. j <td>12</td>
4 q O' R2 \* @, p# D; u </tr> 7 B" S# `) n( f1 V" U. x- v: S; {
<tr>
7 L, q# l# J3 g) U2 ~# R. W <td>13</td> ( E# p5 j9 }; V; {- a: V. T; |, i
</tr>
0 E. e2 c- f3 V/ e <tr>
) j9 Y% G/ B1 f <td>14</td> : F$ v. m8 C. j& [$ r1 d9 k' {" a
</tr>
! S% H( k2 ?: K+ B _1 R0 V& F <tr>
' ?0 p8 L. f3 O* _, S) ~ <td>15</td>
3 c0 C5 ~2 K& ^! o" B, i* i </tr>
3 d# t; v& [1 @$ \8 i2 B! c <tr>
4 j% y: }0 N* [( k. k <td>16</td>
" ~- x! Y/ Q6 d% i/ S </tr>
/ c R2 Z7 f( w: r7 V0 [# L$ R3 q <tr> 3 ]+ g" Z1 t' t$ q
<td>17</td> % X6 n% V( o p& G
</tr>
, @# U1 f% T4 i! k S9 u4 F <tr> ) k. y7 D0 W0 n' E1 ^
<td>18</td>
$ g$ t8 z/ E) x </tr>
6 S+ u$ [- _6 R( i; R7 `8 D. }9 t$ n <tr>
6 l5 h* X8 X. B <td>19</td> / g8 O7 c& B$ O+ [* W: M3 r
</tr>
' U X( ?/ e1 j8 Q( z <tr>
7 q: O3 K4 u& v8 f <td>20</td>
0 s3 Z a4 D: f$ v+ ~! q </tr> 2 D, q8 n& u8 B5 @" [% D
</tbody>
- F9 S- Y3 b& Z7 G </table> , b- w3 T! j3 t' Z- J7 S! h
</div> 1 ~" s. H6 t7 e) z$ d
</div> , v$ N0 |2 b" b" C
<!--table栏目--> ' `* J5 [% X$ Z# F" w2 r" P
<div class="t_i"> 5 P3 B. r8 t5 }. C. z/ {
<div class="t_i_h" id="hh">
0 o. e9 C6 G: k7 ~- L" v7 D <div class="ee"> " @, _: _6 t) q6 G: B* V
<table cellpadding="0" cellspacing="0" border="0">
( m8 d: S2 M% M! W& S: f <tr>
" \: c1 {- T' \& j <td width="10%">栏目A</td>
( I, y! I' J. V: ?7 j4 F9 B <td width="20%">栏目B</td> ) [. t2 K3 {( z8 ^
<td width="10%">栏目C</td> , e+ l3 J- n' `" G; f1 F: y' P
<td width="20%">栏目D</td>
, m2 }& r2 U5 j4 W3 t/ x <td width="20%">栏目E</td>
1 I" h. ?" j% A+ P8 b# w1 @ <td width="20%">栏目F</td> , r! M7 a+ i( p2 Y
</tr> 0 |$ u1 O2 ]! ^1 O( q* C
</table>
/ [/ E( |: V8 [3 x </div> 0 l% \5 ]# \/ h8 t& o2 K0 g
</div>
( K1 k. r' y3 ]1 T <div class="cc" id="cc" onscroll="aa()">
( F+ N: b0 ?! H; p# `9 S& c# J" y <table cellpadding="0" cellspacing="0" border="0"> # n. L, j% x3 y" D+ q
<tr> 9 I: C7 t* C/ V- \ l
<td width="10%">1</td> 5 G) P" ^ Y) s& n4 A
<td width="20%">1</td> & _- c& F* x3 H% o7 d
<td width="10%">1</td> ; q3 D7 A, e+ Z% i1 v5 C
<td width="20%">1</td> 0 a# p- V% ~7 G$ k
<td width="20%">1</td>
* V- }' C1 M& X3 z' s <td width="20%">1</td> * X/ p! x& q* v# Q9 q; [
</tr> 3 F1 E0 F3 r. A# `2 [9 h' M
<tr> . G6 V9 t0 Y: Q6 U1 n6 e6 s
<td>2</td> % k" {0 m( {$ n* g$ D9 s: ]6 {
<td>2</td> ( _& l, }# u" i x
<td>2</td>
; C6 R o; b0 {% [/ ?& y0 E' q$ E) F <td>2</td>
. i7 M g8 z* j p+ n <td>2</td>
) ]8 O) o, [! J6 E6 y( o6 T4 i+ G# k <td>2</td>
$ q: `# o) ~+ u3 C: A5 B, }9 r </tr>
8 J! f5 q* ?6 b' I K <tr> " }# O3 z1 Q) K2 S
<td>3</td>
; y2 }1 N& E6 v! l' [ <td>3</td>
2 X! t- A. @0 o$ Z l$ L! _- s7 q <td>3</td>
) a2 c/ h$ ~2 T0 m2 n E( m <td>3</td> ; b2 o+ T4 B' _/ s: B- g+ y" r' W
<td>3</td>
& h+ ]' c* n" V% p1 Y <td>3</td>
0 Z j* A* b% X# V% R( @2 r </tr> 9 r; ^& C5 E5 j0 N: X) S2 ?
<tr> ( q: {! c' c9 e4 T0 H& @" J
<td>4</td> ! ]5 ]6 z/ Z+ K1 S$ M0 @
<td>4</td> ^; N# z3 l! X" \3 i( {/ x
<td>4</td> ! x9 q; {" T6 d' }; C' e. `
<td>4</td>
: x6 Z( s# u% ?! w( L* B9 F <td>4</td> * A$ W c B9 H4 R% B2 j6 p
<td>4</td> 9 f& l5 ]! K- e" T
</tr> 6 e7 q4 b, q8 b2 C
<tr> 8 I# e7 |9 W" Z) i2 h2 m7 n7 _0 s* M
<td>5</td> 3 a( l, }. x, [0 n/ z* m+ I
<td>5</td>
1 r3 B% t, Q- Z$ M6 U5 ^ <td>5</td>
* f3 o `. q- H( x+ A. a <td>5</td> 6 d% ^/ c0 Q3 x; x
<td>5</td> 9 n, ]5 d! Z9 C! y
<td>5</td>
$ m" X4 _1 v& \* q/ R8 V; \' {. n </tr> , U' I1 i: T1 \! c& `
<tr> ( D! ~1 s" S4 N8 |- L a2 h0 y
<td>6</td>
/ i8 ?8 v" x9 u <td>6</td>
# I% ^' p0 W% U" M, U7 I <td>6</td>
+ ~8 Z2 C4 ^+ Y, W <td>6</td>
& R9 S# m7 x) p <td>6</td> t0 E! r( I( m7 W/ L0 Z
<td>6</td>
1 V) V: [, f1 r3 w; F </tr>
, k4 \( n, f! W2 f. } <tr>
, L' L) \9 z+ D7 _ <td>7</td> 7 e3 W0 I/ Y+ _) |3 V6 M
<td>7</td> g" d" I. `, a- z5 Z" B
<td>7</td>
5 A# V2 M! o& p& |+ L <td>7</td>
`+ g* Y/ D" p+ P" T T/ p [ <td>7</td>
. {3 l: d5 h t+ V* ` <td>7</td>
4 ?1 Z! r0 H- L </tr>
* f* B8 D$ [. T0 P0 M <tr> , C3 b4 W2 T, }8 \6 q9 `2 F- ?
<td>8</td>
' F4 q- {* O" {8 h8 X. }( b! V <td>8</td>
9 Y- K% Z' f l7 z <td>8</td> 0 C) u9 o% j5 H+ y: n7 [
<td>8</td> $ |" G/ ` e* T$ L7 X7 m4 W
<td>8</td> 6 I) i# |( ] z6 H) V
<td>8</td>
% [* h, @0 p) E1 e+ l </tr> 3 G- A, p8 ^9 }/ g1 m# i
<tr>
8 G% ~& N. J8 \& q' R2 y } <td>9</td>
9 F* h- r7 o: j <td>9</td>
! J' m$ V9 B- I+ {: F <td>9</td>
6 k. |8 {! w0 |' M3 | <td>9</td> * a& E- P! W8 K- H4 Q$ Y
<td>9</td>
3 a1 k1 e( Z2 b1 n6 K$ G <td>9</td> j7 B3 D6 W1 _% @; ~( Y
</tr>
) i9 H5 @ t+ W1 f! c) i* y <tr>
; D" z9 n2 O6 @. x <td>10</td> 7 ]8 D' d$ I) O% y, z
<td>10</td> 2 u- n+ N9 U4 P4 G
<td>10</td> 8 r, `: K2 s; [1 n6 I0 f
<td>10</td> / c) l7 q8 {) p( X* i7 R2 ?
<td>10</td>
0 r7 ~9 m9 }, j. X+ x <td>10</td>
: R, O7 Z* N' A8 ~) Z& V% _ </tr>
* {6 ]8 e' j( N4 i8 j/ h <tr> % t9 k# v# J5 I; o2 _# ~5 U+ Y- \/ ]
<td>11</td>
! j. k- x- f, w0 \, E; w <td>11</td>
: P$ W0 z! Y/ j6 M. i: p <td>11</td>
3 h0 G" N A/ p! g! d <td>11</td> . F6 _5 c5 [+ p8 S0 Q
<td>11</td> $ F) ], e5 u6 h4 n
<td>11</td> + @0 ^4 }/ @* @5 @# g- C* _1 B$ T
</tr>
$ `" D& [; J. f/ t <tr> 1 x3 o R5 n- {4 k9 Y; M7 x j: g! N
<td>12</td> ) K: j4 Y/ o5 ]2 e; Z/ j
<td>12</td>
& m+ p5 w$ D2 |; f <td>12</td> + _" |, F& d' _
<td>12</td>
, ?$ G0 [. }" z- R9 R <td>12</td> ! Q5 w' M# W& n. `* a
<td>12</td> e7 `5 F( o- }# b
</tr>
6 J1 ^' S0 H9 S* q' e <tr> , P1 t1 S6 t3 v" F+ ?( Q/ |
<td>13</td>
. D% @- H7 G/ Q" v, J7 V <td>13</td> / h" F1 ^# O( b, c- A# b6 C, r$ K
<td>13</td> 1 J% a/ m T6 `5 Q0 P7 k
<td>13</td> / g: }4 K1 u4 n( R
<td>13</td>
6 P, ?4 }) C; J! i( a <td>13</td> $ {/ E* O" C0 q1 O% {) L k
</tr> + ?7 Y7 w- a2 s' t& C& Y
<tr> $ I- v. Y+ y; @8 Z+ Z, @
<td>14</td>
, ?9 l a' y* h6 a! Y' l4 c. M8 w <td>14</td> 4 C ^. U* V. V) U% z, c
<td>14</td> * R$ Y; G) G. t7 `4 h( P
<td>14</td> # D6 R) u5 W2 a/ L# l. ?! e
<td>14</td> . p% w- j! L3 G/ G( X6 |* `
<td>14</td> ) F& n! X+ [$ `0 M/ ^% F
</tr> 6 Q* V" K" p: L1 ~
<tr>
2 {0 n, q! X7 V) A3 e0 P5 d <td>15</td>
& B" a/ r7 P3 W9 S( x <td>15</td> ' w, x+ ]" g! e5 p) ~; \& l) H
<td>15</td>
& i6 J% S5 a% q <td>15</td> % ]. ?0 A' \- l7 s
<td>15</td>
7 ^ T/ C; A" d2 L! g <td>15</td> ) T0 ~5 X' y3 V W8 m" H5 Y) d
</tr>
* ~3 l5 P2 M' V! L0 A) [) d <tr> : K8 T& D* d# ~' T& L+ M
<td>16</td> - \) E; E/ _* R* y
<td>16</td> + W& T, v, n7 z) a; l
<td>16</td> 6 _5 Q4 i! G9 e
<td>16</td>
3 D5 N; ~* b1 p% `+ ` <td>16</td>
; O* ]0 e! l1 J2 }) R <td>16</td>
N/ i& [4 q; i% E' }" b </tr> 6 @1 C+ ?2 e4 t1 [# p
<tr> 1 ~5 ]/ Q- {9 n( w. p
<td>17</td>
3 D h0 c/ `$ |! f" m( H6 G5 B <td>17</td>
: b1 s: \3 h5 R, F7 o6 L& N0 D <td>17</td>
0 N3 ^5 r1 f) M/ p4 i( t2 e <td>17</td> 3 H2 ]; O8 [1 b, v `
<td>17</td> ' _$ }; c, D% c. h& o, E( b
<td>17</td> 4 E% S1 W' G$ B" C5 n, y4 u4 P
</tr>
2 N; O% t# w R0 N <tr> * A0 ^ H$ H$ J, y y2 ~
<td>18</td>
1 K) l/ Y( s5 V2 o& S) ^. M <td>18</td>
x. l) }/ V2 e) n <td>18</td> 8 U/ r- J6 I ?+ z( [$ `
<td>18</td>
* y) R. b! b3 r6 S" x <td>18</td>
D" m2 \% a: n# U7 @ <td>18</td> : y9 z# X- E i. f
</tr> 4 Y" e5 g" d1 Q, B' i S. ^; {
<tr>
( w- a4 g$ n8 H8 J <td>19</td>
4 u- Q2 P- P5 v% ?8 b! w$ } <td>19</td>
0 X4 C6 n' q+ X+ ~# J0 J2 N# R <td>19</td>
! [' u* t/ u7 B! C. r( g <td>19</td> 4 y( E; [1 ?# ]1 ~2 w" o7 S
<td>19</td> $ S7 O/ Y- w) Z/ r
<td>19</td>
6 O% K9 O- M5 ~5 _; N1 O# f0 k' W. c </tr> 1 V R+ F2 y. @ `3 a3 z
<tr>
, |0 m* e2 Q% C3 U& u& C& r' l <td>20</td>
! T# M2 c+ N$ z <td>20</td>
5 J+ g+ l) ~# k/ `$ n <td>20</td>
+ \ {+ G c* I0 X( p <td>20</td>
% K+ g: I" u0 T <td>20</td>
2 n- _2 T$ y B( b. f <td>20</td> 2 t T, l& [1 \- \
</tr> ; ~! d @, _6 ]$ \! Q
</table>
6 n, A/ i/ J/ P8 a( E2 D </div> : u3 Y- R2 ^9 S9 R9 Z; i
</div>
; o4 J; s) ]6 D: b. S( i: q. b |
|
发表于 2010-8-3 09:17:22
收藏
支持
反对
发表于 2010-8-13 12:35:07