|
|
: P# _3 k9 P5 n7 {Table标签的固定 表头和行头 可以在有限的页面中显示超过页面长和宽的多行多列内容。废话不多说，直接上例子：
- J: j( r4 a+ d* H) O P& i7 w 0 }6 ^( Z% z3 q6 N& O& G( v3 q
<head> + U- t, ^+ }& m" S) e- C
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
2 Z" M* R* `+ C* A<title>无标题文档</title>
* S9 |+ r' ], y( s<style> 9 A- P, x. X$ R
body{font-size:12px;} 1 a" \! L( C" O# n) K9 L! e- [
.t_n{width:30px; heihgt:240px!important; height:242px; background:buttonface; float:left; border-bottom:1px solid #000; border-left:1px solid #000} + g! g& a8 {$ ]' J
.t_n span{display:block; text-align:center; line-height:20px; border:1px solid #000; width:28px; height:20px} 5 f4 t2 l8 v7 {$ s# C
.t_number{border-right:1px solid #000; width:100%; margin-bottom:5px} 1 L$ O( e; Q4 M6 u R0 N
.t_number td{border-bottom:1px solid #000; width:30px; height:25px; text-align:center}
/ t: Y7 c# G& W/ k4 y0 ^6 ~9 X( n .dd{height:200px!important; height:208px; overflow-y:hidden;} ' B6 m: a9 H+ m$ z+ @
; d5 u( v. O! M& @) a .t_i{width:400px; height:auto; float:left; border-right:1px solid #000; border-top:1px solid #000} - X0 V! Q- S. \6 @
.t_i_h{width:100%; overflow-x:hidden; background:buttonface;}
4 m- n8 S- V- o5 H9 g4 Q9 y. Z .ee{width:618px!important; width:620px}
6 M, Q: {( }% P& Q9 c9 Y# ` .t_i_h table{width:600px;} ; k5 @9 p6 B5 ?0 x
.t_i_h table td{border-right:1px solid #000; border-bottom:1px solid #000; height:20px; text-align:center} * R2 s' r, t% V% @4 K
.cc{width:100%; height:220px; border-bottom:1px solid #000; border-right:1px solid #000; background:#fff; overflow:auto;}
, w* m# R' P/ z .cc table{width:600px; }
! m1 y. m9 O) E+ j# F3 S .cc table td{height:25px; border-bottom:1px solid #000; border-right:1px solid #000; text-align:center} / m+ [; z- [/ [2 s1 z8 f
</style>
* {: s1 O* C4 ^% Y2 Q8 v<script> F/ k* _$ P1 T7 Y
function aa(){ . }% V: m7 j$ g6 X- \* T3 [2 `
var a=document.getElementById("cc").scrollTop; 6 K% m3 A- L- O% [8 y$ V
var b=document.getElementById("cc").scrollLeft;
/ A9 G0 ^- W( D: N/ N4 {- ]( ~7 p, y document.getElementById("dd").scrollTop=a; . e( n# Z2 U# S+ o) T, W4 G
document.getElementById("hh").scrollLeft=b;
- H- h3 ~) _1 h) ]6 P! g } $ d9 f4 _ X' `6 q. Q% d4 R) F
</script> * q, U7 o- F m: k* M
</head> 9 I, A6 p* g% V E6 b
1 s' Z9 R, O, u& t h8 n<body>
. V* o( x S# i9 A- | V<div class="t_n">
# r9 e/ R% o+ v% x$ ~ <span>序号</span>
2 s7 P+ D( j5 j2 w <div class="dd" id="dd"> ( C7 _' i' ]# b8 t/ \$ @* i4 f
<table cellpadding="0" cellspacing="0" border="0" class="t_number">
. A$ @( N" ?. R4 w: h <tbody> " ?2 ^. j/ n" f+ f; ], Y% Q5 `% `
<tr> ~ O _: L( L
<td>1</td>
! V4 J* l1 H6 C3 F1 q! c7 O </tr> ( G+ c% z3 z- u, Y7 [3 i4 i
<tr> 4 T9 \, Y3 h% Y" ~# o
<td>2</td> ( ?3 {5 b- Q6 ~
</tr> ; I1 e# o" R9 K1 L5 h
<tr> 4 h) x6 ]5 Q- p0 O. h1 `
<td>3</td>
% F6 i. S. J- F- i </tr>
4 h3 L( t/ Q! p: d2 @ <tr> 4 u+ a. I+ c% o) u
<td>4</td>
) ]. q5 x7 s" n' G; ] </tr>
% M# r y, [0 B" z <tr> 6 q1 z" a& m# k0 Z5 {9 ?
<td>5</td>
: ~; i7 }# O6 \+ }- P" ]: q( @; y1 w </tr>
8 @- N6 B9 M. ^ S <tr>
( U3 O* t& ` s; N; F0 f <td>6</td> 2 _. m# @2 D5 I; D
</tr>
+ _2 F2 g3 b, y+ M8 x) i# R! n) j <tr> 9 t" z/ a5 }/ i9 o) R
<td>7</td>
# N) g2 C5 ?. E4 z% \; ~- V </tr> 8 l; x/ X ~3 ~/ g2 p) I' z2 k2 M
<tr> 7 D9 G) j; b& Q" ]+ e% v
<td>8</td> B: |( r ?' P9 }
</tr>
! e) b+ [! e J% t <tr> ' {7 C$ ^" @; q0 Z/ s+ b
<td>9</td>
% t5 c0 V2 \/ U2 M: ?+ { </tr> - }: N2 c i3 K* [) |6 [# z$ o- s
<tr>
6 x7 P: {! j- T; s# z& I! F <td>10</td>
" ^& |& p' L+ V </tr> : }8 a& n# w" X! L) K& I* ^1 v
<tr>
3 |, \; n( J+ E/ D7 T8 J <td>11</td> 1 M- p& [6 A( w1 G# z+ _
</tr>
& X2 ^4 S2 o$ \+ _3 S <tr> 9 J6 D4 W2 Q# X h8 k% B% O
<td>12</td> - @0 Y. k. n3 m+ J" `( W5 @
</tr>
- d' G+ h# V \1 { <tr> 6 M, w6 s- f6 X5 n( v
<td>13</td>
( a% n8 }" O7 ]& E% G$ {/ r </tr>
$ @% N, b n1 A, c- E <tr> ^1 n- H# Z* m
<td>14</td>
7 O% e* f# ^6 D! J1 d, [( W </tr> # {+ e& v% N( y8 T
<tr> $ s6 N* _3 l6 w- r
<td>15</td> * m" M$ j- a0 ~4 e s7 ^
</tr> 5 j* u, y! e! x+ ]
<tr> : d, W, E( \; ~. O
<td>16</td> 6 h5 @) m/ N* _6 e; B
</tr>
. Q/ q& p! n; M& X% e: l <tr>
( H( c4 d5 o& c' P. R. F( D <td>17</td> : K$ R& z7 y W* G+ ^5 v0 }
</tr> 7 d! F& o! q; q0 u7 P* r
<tr>
# @0 @; J, F6 g1 l( h$ n <td>18</td>
# c0 e' X$ _' v0 r q </tr> & x7 s* {" m g8 z6 \# A
<tr>
2 e% @( F( _. }/ K8 o <td>19</td>
) u! C5 O$ \, X- @0 Y </tr>
3 W: z2 b1 ]- t: V8 k* W <tr>
# N& b, `( ]* ^+ y. c <td>20</td>
E' s8 k2 @+ U+ g& O4 p0 L& H </tr>
" f" @3 y1 ^& Y& ?2 h </tbody> 7 k0 B% ^: b4 P
</table>
2 ?! R2 q! U3 F$ ~# K </div> & d6 T* S8 w6 G+ }4 w. b. T! z
</div>
8 e" e. U. n* }+ w: d2 F# D<!--table栏目--> ! ]7 y4 _: T' h: s; Q n
<div class="t_i"> 9 N4 d- j! X. n0 M
<div class="t_i_h" id="hh"> T2 X, d" n [( \
<div class="ee">
$ w" z5 w5 r5 Y- N <table cellpadding="0" cellspacing="0" border="0">
9 w: m- k# b2 z5 `! B <tr> ' F [. i2 _4 V& u C. n& G; Y* x
<td width="10%">栏目A</td> F# S$ x0 y, Y
<td width="20%">栏目B</td> 9 f, N1 |6 i6 k8 ^. F8 m7 L2 C
<td width="10%">栏目C</td>
3 Z1 x# q- T# e <td width="20%">栏目D</td>
8 A6 z9 \+ |4 t <td width="20%">栏目E</td> 5 {: J, L) H) d& y
<td width="20%">栏目F</td>
}- A9 ]" E7 P* T0 j </tr>
2 J4 L! @5 Y9 K7 z1 s! V </table> 4 Q# X% X8 O+ x
</div> / i! e0 V! }7 Z& Z
</div> % r/ \( b x K4 ?: L
<div class="cc" id="cc" onscroll="aa()"> # L& R( P2 A2 G, @
<table cellpadding="0" cellspacing="0" border="0">
( Z: p" ^ _/ G P: f <tr>
* I7 F* q4 T7 i- e5 h8 p, l <td width="10%">1</td> * l. O% ]! C5 z
<td width="20%">1</td> + o9 Q- l4 k+ o% Y3 d$ v* P
<td width="10%">1</td> 9 i1 M8 Q9 Z1 K. W( C. v: O" E
<td width="20%">1</td>
8 e$ y$ ]- Q8 U' |: M: D. v; ^: Z9 I/ G <td width="20%">1</td> 6 E' |2 M2 u$ k) z$ b
<td width="20%">1</td> C# e1 E2 q7 d0 r$ K: h, X
</tr>
$ z$ U6 l- k* [. r, ` <tr>
" N% C! X3 P7 `- ? <td>2</td> ' _5 e7 q1 P* ^8 O! y
<td>2</td>
* B- \5 Q$ T$ v* w2 J4 F1 ~4 z <td>2</td>
4 W8 S: R) [! I: M# u <td>2</td>
0 @' k& t' i, O5 K2 K6 { <td>2</td>
/ T/ p( y- b5 B$ {+ u. s6 n <td>2</td>
1 Z/ o5 G* J6 L( D8 `; T </tr>
/ ^0 o5 n% }( p+ r! B% Q" j <tr>
! y+ V7 H( ?( K- j G5 @& t2 i | <td>3</td> 3 C8 U, I+ ]6 s" u' Q D
<td>3</td> + |5 w' e/ i( r$ r+ M
<td>3</td>
% i- |+ e3 L8 \ O& c0 \ <td>3</td> * R' J$ ]9 l* U( j: c/ P! w+ ^
<td>3</td>
( q/ w1 I3 F8 V, y <td>3</td> ) w; S: u+ g7 f4 R
</tr>
$ r- Q! t* e* z h3 ? <tr> 9 i8 a. T2 o, E0 A' U/ g$ K4 H
<td>4</td>
$ e, H9 q- m! q. O) L' E <td>4</td>
' ^- J {: w% |- n4 D/ N <td>4</td> Z/ g: P" q+ }( J% @
<td>4</td> 0 x; b1 K+ M9 \, H9 l2 P6 Q
<td>4</td>
6 O/ ?3 Z# k- N! R+ ]( w <td>4</td> 1 p( R. G+ X0 [& q
</tr> v! Q: Y5 d5 f$ b
<tr> : C: e+ R) m, n/ x' N9 U
<td>5</td> 4 f; G! b6 c# M
<td>5</td>
2 s0 ~8 Q l& G <td>5</td> 6 g) Z! e( h6 G% [
<td>5</td>
6 s$ @/ @, d1 n' {0 ^* l! Y" @ <td>5</td> 7 k. w5 a# E. ?5 l5 o5 H6 Y- r/ H% }2 G
<td>5</td> 2 y0 V/ }% I4 T- Y3 f) \. o, W
</tr> 5 o- F% t" \- E& ~3 s
<tr>
F; ^8 [" H; R& D! Y: ]; q& } <td>6</td>
R# ?0 @" N; s7 Z0 r8 q' l, | <td>6</td>
7 G3 G5 `+ {/ h* O/ g <td>6</td> * z' n: u, y7 K+ |
<td>6</td> y: D( G# L# a! u# n
<td>6</td> / t% K+ U2 ]2 s/ ]
<td>6</td>
+ [: U9 r) E& T. u& k) V' U" l </tr>
9 Y* v5 _ S- c" U# K: N2 I- C <tr>
8 w% g5 q" K! n$ v# V: e <td>7</td>
! S1 g& Z7 p, {6 T <td>7</td> ! N2 G n6 b* N
<td>7</td> 4 X0 N: y( b" I" r# @
<td>7</td> 7 S. a2 I I' u6 d9 Z9 a
<td>7</td> * x: l7 u [. s0 K9 G
<td>7</td>
9 z! s5 O2 P1 y, V- N4 H5 o </tr>
9 i7 h: |$ h2 o3 D' n. W0 {3 Y <tr>
3 \* S6 o2 y9 L2 v$ U( M- ? <td>8</td>
$ x6 u l# U& a3 F5 m( B# t/ d% { ^( R <td>8</td>
' f. d2 d. {+ R) R" H8 t <td>8</td>
# @: l$ P6 Z8 _$ I* i <td>8</td>
. Q2 R. K: @) F <td>8</td>
( Y/ ?/ {7 B5 u5 j( d0 q' u+ q8 ? <td>8</td> 8 `9 J6 z# {) N. u" a( S* m/ l/ g) }/ j# X
</tr>
9 M# J* h1 s0 I% A7 g& r( E2 ] <tr>
6 E, j; l: e" i7 b: R/ {* V3 ? <td>9</td>
: } h* Z8 H1 E$ d; a0 T <td>9</td> : a6 h7 o: h B+ W5 r0 j. z
<td>9</td>
: ?; V8 o. U0 K! n7 G$ b& T <td>9</td>
4 j* M; s6 e& F! U <td>9</td>
5 r4 h& b! w+ u <td>9</td>
3 H' s, q1 | f" M. Y </tr> * W' Y3 r; N, a* V) `2 k! {
<tr>
. K! L& d$ w* P9 {- \. o <td>10</td>
8 Z) s- Q$ b0 U: W5 b5 F- ~: d <td>10</td> ' V5 u4 u- `4 R
<td>10</td> Y" ^, A1 Y' {* c4 b
<td>10</td> % w9 K6 ~4 D( c9 q# y# P1 Z
<td>10</td> 4 ?/ h! w5 J! g) f" Q* B U
<td>10</td> 1 Z3 q0 J, {3 E. N
</tr> ) S" ]2 w( B* p$ M4 H! J
<tr> % b" |: m$ u K5 x
<td>11</td> : Y" |0 H* u2 c. {' \. n
<td>11</td> 3 z+ w! ?! ?9 v `% R' R. @
<td>11</td>
# J& m7 I& z# [1 @4 @( t2 N% k <td>11</td> - v3 s. ~% t% E3 H* Q3 E
<td>11</td>
; r; W& u, f7 I7 m4 k) H <td>11</td> + X1 u, ?& [, [+ d
</tr>
: v; u8 {, }! W( W <tr>
. _! W/ G2 G$ M+ [1 h e) s @7 X <td>12</td>
9 \8 i2 i$ _& P <td>12</td>
- m. `# f- a$ i( C* _ <td>12</td> z- A4 r7 z) U. N
<td>12</td> : x3 Y& o; W: C4 y* A% p ^1 U/ k6 b
<td>12</td>
5 r# H& Z) S9 P) O3 R" S+ |0 e <td>12</td> ( k! K7 j( n2 G; ^$ F
</tr> , o* `4 P1 }$ D4 A5 h9 K3 i
<tr>
8 _% }: `7 } { <td>13</td>
7 L; i5 B* g9 c6 Z' N W: S% E <td>13</td> : W6 L% b& h" v3 K
<td>13</td>
z' Y6 K. k$ Y6 P, R <td>13</td> " L4 N$ G! V; |0 u2 [/ x
<td>13</td>
4 t' Q O' _, g# l3 z <td>13</td> " d t) Y# i& R; y5 p2 B3 _* d
</tr> 9 k) Y1 p/ d0 t1 f; T: {9 W
<tr>
& }! A3 x) G9 p# F <td>14</td>
* Y( `1 g+ K. W% O" J$ R <td>14</td>
+ o) U7 Y# c9 @* W) C; ~* d <td>14</td> ( D% @( {+ S _4 K+ \8 H) F
<td>14</td> 4 T# a6 a# s" L- Y% q
<td>14</td> 3 _0 t* i6 Y: X0 M/ V+ `: u# f6 n
<td>14</td>
5 T6 S- Y$ |7 L </tr> . g/ v) K% g9 b1 v. ` w
<tr>
" i$ h; r6 h7 @ <td>15</td>
2 ~! x6 M8 @ p3 e# Q" g <td>15</td>
" X. r6 F& n4 b/ I1 `0 t <td>15</td>
5 A d' K' S0 b! j; `! [ <td>15</td> # A6 |! a- w, z4 L! r% B
<td>15</td> # [0 J) u: e9 C- J: C% [
<td>15</td> # S/ P" x9 n1 p
</tr> ' @) U9 w* a6 C; s% J$ [( ?
<tr> 0 J% I: R4 f2 Y& v# X2 i
<td>16</td>
5 D* u6 q) T( a* z, @ <td>16</td>
: H) V& N: h! H+ Y <td>16</td> 4 ?9 N: F1 s6 k0 B4 G1 s; ^
<td>16</td>
: o: o) E4 Q5 w <td>16</td>
, J! R, \; J; V8 `) L <td>16</td> 6 @/ w# u! t# j! J7 h5 m
</tr> , E( o/ f5 ~+ x. o, x
<tr> / B$ I: z7 K$ |' ]$ @( o
<td>17</td>
- X* l+ M; c. T <td>17</td> ! ^2 M1 G; B/ |
<td>17</td>
2 \, n4 `5 O, U <td>17</td>
, q9 q+ ?3 r' b9 p; M2 l <td>17</td>
' M9 ]+ N- d9 D& N7 G8 q <td>17</td> 6 W! q# O% \4 Q0 {& \+ x& @
</tr>
& o1 M) d" z8 A <tr>
1 o4 j( R1 w) j( R7 S" A <td>18</td> 7 V, h+ ~# M& l# B8 ~/ ]4 U% K
<td>18</td> " |1 J0 r, \: t; {7 {/ ^
<td>18</td> 3 {: J* g; R3 a' u
<td>18</td> / L% F6 ~' I @( J
<td>18</td>
* R) O' j- n; F' ?7 @ <td>18</td>
" d2 F8 C3 M' G4 z" A+ [0 ^ </tr>
+ S$ X$ _+ m. a- J0 a <tr>
1 X& [. ?- N( {% a$ c8 g <td>19</td>
+ O4 ^, p2 X8 V% n# ]7 o <td>19</td>
9 v# s1 T" z8 I( r0 V' l9 S) N <td>19</td>
& x3 b9 e8 c% I" r( p9 { <td>19</td> . d% E7 p( M# a2 \) B
<td>19</td>
, x8 Z5 ^/ e9 a' Q# u <td>19</td>
$ K/ f- u3 d7 w( v: f8 ?! v2 A </tr> ) `) {) m$ U4 D. D1 v& e+ \# e
<tr>
7 l+ a ^2 g* O <td>20</td>
5 q$ s# s5 C* ?1 c3 ~7 z <td>20</td>
; i& S0 M: o6 E& {/ c2 _" D <td>20</td>
- O' ~& z2 b, |7 |6 p% _ <td>20</td> ) k; D/ Z) R! w- R5 ~
<td>20</td> : h# w( R/ n4 W" R A7 f8 _
<td>20</td> / W4 x& X2 R! |* g' |7 x& j. e' e6 u
</tr>
+ D' d9 o! {/ P5 n </table> 8 a! b: v: C7 O; |* }
</div>
. [- a1 ?0 L" ~% }</div> 7 p7 ?6 i0 F% x
|
|
发表于 2010-8-3 09:17:22
收藏
支持
反对
发表于 2010-8-13 12:35:07