|
|
0 W/ Q( c1 s2 |Table标签的固定 表头和行头 可以在有限的页面中显示超过页面长和宽的多行多列内容。废话不多说，直接上例子：3 v Q1 p. [8 m% E5 w8 y
, Q" j; d$ d3 d) z# T2 q2 ?# H
<head>
/ w& C# a4 H+ ~<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 3 a; G: R/ x$ t& t. o% [' R. [
<title>无标题文档</title> 6 x3 p" |! g/ d
<style> 5 ?0 j* \$ `" q1 f% B0 l* {
body{font-size:12px;} 5 c: f" T, {2 E3 m, \
.t_n{width:30px; heihgt:240px!important; height:242px; background:buttonface; float:left; border-bottom:1px solid #000; border-left:1px solid #000}
+ L' `3 B3 ^+ R0 _5 c R .t_n span{display:block; text-align:center; line-height:20px; border:1px solid #000; width:28px; height:20px} 4 z4 d+ Z% E4 b: D+ T
.t_number{border-right:1px solid #000; width:100%; margin-bottom:5px} 7 L) _3 k7 k) S0 Z. g
.t_number td{border-bottom:1px solid #000; width:30px; height:25px; text-align:center} f! H$ r* w- n
.dd{height:200px!important; height:208px; overflow-y:hidden;}
3 r5 [$ M+ \7 u: ?+ W! E- u9 s Q* g& G! v8 L' Q: t& [
.t_i{width:400px; height:auto; float:left; border-right:1px solid #000; border-top:1px solid #000}
4 W. i3 G( |; v( j9 b9 i. M, C* I .t_i_h{width:100%; overflow-x:hidden; background:buttonface;}
3 i) z6 I1 B# w .ee{width:618px!important; width:620px} : j. j* U6 `, `
.t_i_h table{width:600px;}
% g) R: M$ |6 n& H4 { .t_i_h table td{border-right:1px solid #000; border-bottom:1px solid #000; height:20px; text-align:center}
) i6 |: i/ C( [4 y( n .cc{width:100%; height:220px; border-bottom:1px solid #000; border-right:1px solid #000; background:#fff; overflow:auto;} 6 M) E0 `% Z+ G% C8 c) O- n
.cc table{width:600px; } 1 N3 {! D* {1 w
.cc table td{height:25px; border-bottom:1px solid #000; border-right:1px solid #000; text-align:center} * L8 ?; i' X9 x+ W- }) ]0 t3 J, R
</style> 3 Z- [) r! X9 K& H8 o9 J
<script> r ~( Q5 \5 n8 M3 y1 E
function aa(){ , O( B+ v1 A( c# b
var a=document.getElementById("cc").scrollTop;
- m6 w- j, K1 e: ~ var b=document.getElementById("cc").scrollLeft; $ t1 V8 h- W3 \2 K7 q
document.getElementById("dd").scrollTop=a;
! H& F! P# x# q. k8 l document.getElementById("hh").scrollLeft=b;
' D/ J. o0 R7 o, R! B }
# ?9 i* W3 ?, W</script> 5 U' ?& Z0 h2 X' H% U( v) d- h
</head> ! c% n: h1 Q4 x3 J- }' r0 F& q& _* b
- W) X: k( z& d: g4 O- a) p: }
<body> 8 z* }$ A% I2 N: X8 t7 U; B
<div class="t_n">
& Q! V- W |. _: ^7 `# Y <span>序号</span>
% M) _, Z/ X3 k9 f. v% v <div class="dd" id="dd"> ( q; G: q9 w% _0 t, X3 p0 w
<table cellpadding="0" cellspacing="0" border="0" class="t_number"> ; \' a( S5 L7 Z
<tbody> / j8 ]. G6 F: `, x
<tr> 4 w) R2 e5 B+ i4 e% } D
<td>1</td> ) J4 x3 h2 `: e9 c5 f8 c
</tr>
0 R1 P) T; z s& P& M/ V1 ? <tr>
U, j7 q* R: |% W) W0 P9 N <td>2</td>
& c$ t) f! P! L: o r2 C- i* [' B. L' \ </tr> : B& c0 B& x$ r. y
<tr> & h/ ]4 m. [5 N+ {2 n
<td>3</td>
: n0 a# T0 P$ G; I9 Y9 Q" K: _& @+ U </tr>
! `" ~1 ~) Y, H& \; z1 I3 l <tr> 5 s, ]! D- y# ~: \1 L6 ~$ I
<td>4</td>
/ X N' _6 _) l8 S" ~ </tr> 8 S; I1 Z. f) d9 D6 J# d- h
<tr> 4 ^: z& c0 v |# E& b
<td>5</td>
/ U# s( n q& z- r. B </tr>
5 z) x( f$ k- B" c" j4 i. D <tr> * f0 T. c& O4 l3 L. x
<td>6</td> 8 y- X; N2 U. g+ F( L
</tr> x" M- N" {- z. ^
<tr> ( }3 ~- X, R; S2 K( w$ M
<td>7</td> 9 {) U7 b5 ^3 o/ y( V$ ?
</tr>
' [8 A6 l" a1 z* G; Q- c+ N <tr>
* |; O: P( e- l( A7 H u& x <td>8</td> ! J7 N! p+ k" a) `
</tr>
# A4 N7 b9 s: [2 X3 v <tr> 7 b! i. x( `" |0 K4 c
<td>9</td> * E7 A( Y# F2 }6 _& Z
</tr> ' d4 I, Q% U: Q2 I' O$ K/ v1 e
<tr> # g8 W: ]4 [7 m2 v9 Q+ S& [
<td>10</td>
; c. U9 I0 y) j8 z0 G </tr> , C1 {7 @/ f: q# m" W
<tr>
o& a+ ]; R& z- U" T5 C! A9 ~) ? <td>11</td>
0 e: Y. ^' E- p. ]7 B </tr> 4 N2 d1 p9 y! F. j0 g( y
<tr>
5 `5 o% Q, }- |% R! U9 k+ v <td>12</td>
8 E: ~6 ?- O( I </tr> + m) `3 w* h3 Y* b p3 d
<tr>
0 D1 l7 `9 Y! e <td>13</td>
+ o2 t/ N) g# a$ ^2 A </tr> - E7 ^, O9 Z0 p
<tr> 8 [" O8 u- m8 r9 c% ~+ c9 d9 ^
<td>14</td>
! P( B1 n$ {& f' L, B </tr> : `. C+ J" [+ g( ?. E
<tr> 3 O2 i G; }* ^7 m4 m9 ^2 o% w
<td>15</td> , x# i' w- W: K
</tr> - K8 f5 ?2 e- l5 ^% k' T
<tr> - F$ w; R. j# y S4 l3 s+ \6 n5 p
<td>16</td> $ ^$ @0 Z3 T1 m$ Y" x0 f
</tr> Y& c% p& y- i% a
<tr>
! V' d+ R& L8 h2 l2 N+ v <td>17</td>
; L+ l0 p( d! j% M1 j </tr> ( b7 j# E0 T/ W4 u
<tr>
+ ?0 s! x; q S" z9 v <td>18</td>
: q! k3 O+ j# V* t, q1 v4 w9 O </tr>
0 g" D' ?8 `* d3 b8 ? <tr>
. S( J. k8 t3 s, ? <td>19</td> & A" W" ?! ^4 o0 h
</tr>
! H5 u9 h) f+ i0 S- N <tr>
$ u+ \* i1 Y+ }0 g7 a <td>20</td>
* }" Z- u; ~: w$ r+ r </tr> + M& N& q/ n% n+ }/ h4 O
</tbody>
J h3 |3 r4 A2 N* s" C, T </table>
4 }1 `( I9 x3 r& R6 s </div> % k0 w* v0 P: a8 P! m, M
</div> " ? f( @) @4 Y3 A( R; u
<!--table栏目--> * ]- X. M2 t0 o8 w1 a
<div class="t_i"> 0 O. [) p) q( G
<div class="t_i_h" id="hh">
8 c3 `1 `8 u( J <div class="ee">
! U0 d0 K9 y5 Y4 P7 T( \) d <table cellpadding="0" cellspacing="0" border="0">
, T* V) F, S+ y+ Z j$ h <tr> 3 e& l- W- A) Q$ J* k$ L
<td width="10%">栏目A</td>
/ E( j8 y+ k( c" W <td width="20%">栏目B</td>
% o9 }" w3 e, E8 f* p8 R4 y D <td width="10%">栏目C</td>
$ [: n: i6 r6 _' r <td width="20%">栏目D</td>
9 \7 a/ v! B$ o, P <td width="20%">栏目E</td> ; v7 T. Z F; z2 Z
<td width="20%">栏目F</td> , p: b+ G* P7 Z) i
</tr>
1 b. C" B# `: U& w, e. t </table> 8 {& ^9 Q7 n& a4 T
</div>
+ i) z4 z! A- \7 K# K* ^ </div>
4 \. e4 [- _) g& ?# \- V7 J6 d& o <div class="cc" id="cc" onscroll="aa()">
l0 B+ s9 A7 ~ <table cellpadding="0" cellspacing="0" border="0">
3 Y) n% k- t- F% ~3 X& Q. c5 U c <tr> 9 V: T- X9 O- x) C+ ^% E
<td width="10%">1</td> . E: m. W/ ^1 A* E% _* J; N
<td width="20%">1</td> , K2 d0 y2 L* l# w4 ?4 p) G
<td width="10%">1</td>
m p' p/ h7 p! x, H; m <td width="20%">1</td>
' C) a7 N% {$ Z1 H! _ <td width="20%">1</td> 4 W Y M2 ~3 b# F
<td width="20%">1</td>
$ c+ x/ D& O# P# @' g m* J4 { </tr>
3 K/ ]/ c+ e& f: p+ O2 C) e( b <tr> 9 e* e, Z$ }& L1 ]
<td>2</td> , x! B* p$ o5 g$ c7 y5 D
<td>2</td> * f h( b! ?" B- f- A& o& K+ h
<td>2</td>
! B( s' Q$ X2 U1 t& c# e <td>2</td>
5 {5 G! B6 d+ |7 Z7 X+ S <td>2</td> . p: u9 a+ l7 t8 u
<td>2</td>
' N- q: V5 B7 X/ H </tr>
$ ^0 J' T& V" z( t <tr>
$ R$ C6 L x3 J <td>3</td>
4 b; d7 ^; }4 d <td>3</td>
7 a- k* s( V$ p <td>3</td> + u$ e: h2 W$ a, l+ T# G5 d4 I
<td>3</td>
0 [' [4 j, y4 c$ ~; a$ I0 l <td>3</td>
i+ I$ C( M) Q# Z! F7 x <td>3</td>
8 e% N) c, A$ P9 \# k9 z </tr>
- Q4 \; \& R% o <tr>
: I( O3 X9 U& d$ j2 a$ i8 ` <td>4</td>
6 u7 ?! L3 f& _9 ~5 o2 L <td>4</td>
+ j) B7 M6 z5 w- K; m O <td>4</td> - E3 t" a' w3 M5 u; A# P: v
<td>4</td> 3 W7 b8 O+ p+ {" Z% h$ q
<td>4</td> , \. `/ V* k; Y. S- B
<td>4</td> 2 v, |2 Q& c$ R
</tr> + [% y) I+ P/ O+ T! w
<tr> ( t# S8 D$ J9 K4 I' @7 G
<td>5</td>
! ]8 u9 i% Q- w% F P <td>5</td>
7 r/ s$ A6 H# P+ w2 @8 @ <td>5</td>
: ^# z) m8 s# p <td>5</td> 4 z; |4 W: n* q4 c
<td>5</td> 9 y7 z# B* q/ n! s+ ^
<td>5</td>
9 N1 g, [) L% n7 j </tr> 9 @5 N0 e" ~/ F _
<tr> : T4 o6 X' j% T- B) c. p+ E3 c
<td>6</td> ) o+ D$ r' \ o3 D2 M6 N4 s
<td>6</td>
8 Y) r, L$ g& l' r <td>6</td> 8 f' b. \3 M: N$ c+ `
<td>6</td> 6 I" }3 h9 k. N5 P$ R* d0 r5 Y @
<td>6</td>
2 O' p' B+ ]; q, T( e) S <td>6</td> 4 F9 M; I* o# i7 i5 z* {. X. t
</tr>
" V" ^% L" T- [, I3 y/ J <tr>
! P' _8 I7 D) k! D" R ` <td>7</td>
( h0 {- O* \, V# t% I7 M3 ` <td>7</td> " x( |3 E0 S- c) r9 h
<td>7</td>
, J/ L1 b. h. v, c) n <td>7</td> ! p: Z9 [* r8 H( E
<td>7</td>
, ~; q3 S+ n U! _# Y, R <td>7</td>
5 u1 S/ O* ^/ K) o0 u# H </tr> 8 o# M; m. E6 t7 f( F
<tr> . M! d+ Z! g W6 O& l; ]5 y9 I
<td>8</td> " v! B- [2 k5 R( ~) g' X/ j
<td>8</td>
4 [5 P1 y$ X; K <td>8</td>
/ l( V# T6 m1 ]$ }" w5 _0 Y <td>8</td> ) l& `4 @; {' Q6 U j/ y# W( V
<td>8</td>
; l! e* J$ ?! ^9 ]/ {4 N <td>8</td>
$ ~. f: H7 N7 J8 _, J0 y$ S l0 O/ b, C </tr> - `& b; V6 a3 h. z
<tr> - V3 c/ m' ~1 j1 F2 l
<td>9</td>
+ I5 h* `8 H: W4 S# P( ? <td>9</td> 7 W D4 D) S- g% ?7 X0 F9 I- O# l
<td>9</td> u2 w8 Z$ o# O! o4 V" E
<td>9</td> $ O9 w; b8 k; a8 E
<td>9</td> 3 S8 G+ f$ J, W* x7 F/ o1 G
<td>9</td> 1 P9 I6 t4 G |. V
</tr>
; _: [5 A+ \2 P/ @ <tr> , d% \, V5 H; w5 t8 F7 ^! P
<td>10</td> 3 D) V, O: K- N
<td>10</td> 1 Q5 N* l/ Z4 J5 U+ N" ~
<td>10</td> ; N; T8 `) w. A
<td>10</td>
1 E) Q+ ]7 }8 {6 X9 w/ M, u7 f9 R <td>10</td> 0 J" _' o2 w7 x0 r+ s" e7 l
<td>10</td> 4 x( l ?9 Q, {, R% U/ W# x0 {# n+ {$ P8 x
</tr> . f& |4 T7 ]2 P. K% D; E
<tr> - m% t* O$ k- X2 `7 q) ?4 \! [
<td>11</td> 3 R w: D5 A5 i$ @
<td>11</td> 7 y# p9 Y# z, K$ u/ P9 W4 a. V( E- `
<td>11</td>
" j u \! V5 d7 ]) R4 Q <td>11</td>
- C8 n- w! e/ t) `/ M! r <td>11</td> , \6 q* S1 H5 Q. n/ q) Z
<td>11</td> 9 y N8 b/ P. H3 N* X
</tr>
. U+ ^" ~/ A; ^* G7 F <tr>
( r/ A3 s2 E+ N0 J9 M6 ^2 Y2 P <td>12</td> ; B7 U; y0 k9 t9 E: n( X
<td>12</td>
c$ E( j5 i7 M& w5 I0 e3 g# h, J <td>12</td>
, Q7 A. L- R! ^ <td>12</td>
* n+ v s0 l( T <td>12</td> 7 ~ w/ f0 L" |: Z" g s
<td>12</td>
1 Q$ O1 N0 B4 C) r Y </tr>
3 T9 f/ [1 X8 z* Q3 t( _" Z <tr>
8 w! H# r' a( B6 ~+ o/ ?. w, i' q+ t <td>13</td> " }. U8 V# Q9 u6 {/ y2 }
<td>13</td> # n# a9 x- B- A J
<td>13</td> # |/ l( M, ]0 F
<td>13</td> - B, ]; R; z/ ?4 j
<td>13</td> ) A. U# Z' A6 D0 H; g
<td>13</td> ! i' `5 l5 t7 M n, ^( X2 E
</tr>
8 u: @0 a% }% l3 Y4 G$ B; b <tr> " `; x H* o& A6 I* Z1 L
<td>14</td>
( T' _6 P- y6 s) n0 v9 F <td>14</td>
$ d. ]; D1 X, I! s <td>14</td>
8 L+ `" F( Z- A. u7 e3 u <td>14</td> ; _$ e0 u9 ]( T/ o
<td>14</td>
4 [; b _; V) r+ a: |$ @! h <td>14</td> 3 v Z: K* D: G& o0 S
</tr> 1 f' n* k. R6 W2 P( U' X
<tr>
2 m: |% u! \' ?& a# L( Z1 y <td>15</td>
- u: a E7 I* r& t' r( U$ }" Q <td>15</td> v& W3 e6 N& [8 p0 q
<td>15</td>
4 f* s- K* x* {( G <td>15</td>
/ |. V) ]5 x. h+ N: j0 H' b <td>15</td>
' E6 p0 o# I6 T4 d( f4 n8 p <td>15</td> " o3 }4 L% y, _) F, L& d `
</tr> . e I: w% Y) J" G' j# j
<tr>
$ r1 M) J2 R$ ]8 \, K <td>16</td>
# m8 X3 E. A J7 n* X3 D4 x: X <td>16</td> " f" [4 N* g+ {% Z: x
<td>16</td> : D# A! C M ?6 u
<td>16</td> & ~1 f- q6 N2 V) r' U9 R) x9 f
<td>16</td>
, ^3 H+ g8 _' q3 J <td>16</td> , f4 K' P0 b8 D" t5 M
</tr>
( \* n0 `6 U7 V2 e: @* s" @ <tr>
: @. S! V% v7 ?* L, ^: }. K; e <td>17</td> 2 K( S% ]6 u( D9 X
<td>17</td>
% N. E- @3 W0 `2 U! [' f <td>17</td> # e8 C2 z# C0 R
<td>17</td> 3 L3 r6 h6 X/ v6 l7 Y+ _$ X) J
<td>17</td> . a" c0 o! n& C4 N
<td>17</td>
$ U2 v* ~4 u: C/ {+ b# U/ L0 g </tr>
. k5 e+ w5 C, s$ r <tr>
6 x* O' W' _; c% }+ \ <td>18</td> / e8 S" _$ U% m
<td>18</td> 1 H1 D! `" K% ?$ G
<td>18</td>
3 v& p8 G# |! P- g$ ?4 }7 G" n <td>18</td> . @: L1 p5 ]9 m0 X; U1 R6 ^
<td>18</td>
0 l/ [( E2 u% u% ^6 H/ ] <td>18</td>
0 _. C1 E% j( k4 }' i; e: Z </tr>
" }# e. e1 `# g: j3 ^' T& l <tr>
( O# G9 h! O" G1 [; m <td>19</td>
7 v. A1 g0 o0 F; c+ j! N <td>19</td>
8 w" Z" x6 N* K% P/ o) E# Z. { <td>19</td>
: k1 x( d& G4 i9 K/ v <td>19</td> & H; K) q4 {2 E% v! F1 n
<td>19</td>
' g6 x: Y- l9 e G0 x, d8 ]3 X- e" F: B% C <td>19</td>
* L6 @* E+ X. p% y1 O </tr>
# }! h$ J* y; l R% A$ _% |3 ? <tr>
2 g" R; W0 g' } <td>20</td> $ }) P: {$ o9 R
<td>20</td>
3 @5 P- j3 `0 A, P @ <td>20</td> 1 U, r6 O- E5 B
<td>20</td> . i/ o1 G3 f1 N, q
<td>20</td> ; q& I* U8 {% R
<td>20</td> g* ^5 Q& e3 K! i/ Z7 b
</tr>
/ N2 f7 |3 }+ z7 t0 A& X1 S6 E </table> $ F& j6 n7 R' P4 W
</div> , O3 M6 j2 T, U
</div> # W w$ W* v2 d9 r4 i! Q9 H
|
|
发表于 2010-8-3 09:17:22
收藏
支持
反对
发表于 2010-8-13 12:35:07