晨鸟科技

标题: TABLE固定表头和行头 [打印本页]
作者: huangxiong    时间: 2010-8-3 09:17
标题: TABLE固定表头和行头

% ]$ }, l$ z) f  y3 W9 Q* C+ \Table标签的固定 表头和行头 可以在有限的页面中显示超过页面长和宽的多行多列内容。废话不多说，直接上例子：8 d, U0 x) I) h. o" K

: Q- X2 ^* v7 D* t: }' C) _<head> ! a/ Y9 ]! e( h$ O
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> ) K5 C5 Y, X) `) h% y, r6 C
<title>无标题文档</title>
; x. U" z/ L4 Z: G<style> $ b: N3 Z2 C8 ~9 V- P% I+ P
    body{font-size:12px;} % N; }. U6 z4 v0 L. }" D5 b
    .t_n{width:30px; heihgt:240px!important; height:242px; background:buttonface; float:left; border-bottom:1px solid #000; border-left:1px solid #000}
/ H* I$ l0 w! x0 {4 d    .t_n span{display:block; text-align:center; line-height:20px; border:1px solid #000; width:28px; height:20px} + z" @. ^4 I% Y6 p( O  T
    .t_number{border-right:1px solid #000; width:100%; margin-bottom:5px}
2 K  G+ o# S6 q9 H2 R    .t_number td{border-bottom:1px solid #000; width:30px; height:25px; text-align:center}
# O6 b2 l! h# |/ k' K    .dd{height:200px!important; height:208px; overflow-y:hidden;}
/ ?) I1 j( |! U1 M- D3 {
6 s/ B6 c5 u+ E: ]    .t_i{width:400px; height:auto; float:left; border-right:1px solid #000; border-top:1px solid #000}
, q) F- W! C- t  ?+ O1 R    .t_i_h{width:100%; overflow-x:hidden; background:buttonface;}
( J- R; b' f$ x$ k. Z! T    .ee{width:618px!important; width:620px} # k! H* e/ {; r/ r2 j; j
    .t_i_h table{width:600px;}
) k9 o* U! k- C4 S0 |2 z/ y0 ^$ v    .t_i_h table td{border-right:1px solid #000; border-bottom:1px solid #000; height:20px; text-align:center}
. q% S7 \% z: A+ ^    .cc{width:100%; height:220px; border-bottom:1px solid #000; border-right:1px solid #000; background:#fff; overflow:auto;} ) S& u* F; n! b* l7 q" F0 j
    .cc table{width:600px; }
1 \: j8 d8 P" [    .cc table td{height:25px; border-bottom:1px solid #000; border-right:1px solid #000; text-align:center}
& J) m  F  Y0 `, B# e& @</style>
) L; M, K, q; Z<script> 7 \, Q3 R9 z' y+ `% U, G/ _
  function aa(){ $ Y" Y" ]6 c1 t+ l
     var a=document.getElementById("cc").scrollTop;
9 e$ L% p7 l+ j4 O# v     var b=document.getElementById("cc").scrollLeft; 4 C0 ~# }/ ?& t) n
      document.getElementById("dd").scrollTop=a;
/ A. @( J; F) M( P. [, E3 _      document.getElementById("hh").scrollLeft=b; 1 ?( |% M1 J* b3 z' v* B& x& ?' v
  }
4 ?. ^' |8 Y9 ?* }</script> 4 Z8 A2 z4 a% T  T0 t+ k0 K
</head>
0 I2 ^) ]2 @4 C6 Q/ d
* O' c* H4 p0 o' ^3 O<body>
' y8 c( T- J1 S/ m! b<div class="t_n"> - p/ w+ Q* }3 ^2 ~0 c9 f5 t
    <span>序号</span>
! @; O. P, X0 _    <div class="dd" id="dd">
' Z4 b5 k+ u- G        <table cellpadding="0" cellspacing="0" border="0" class="t_number">
6 V2 u8 K3 h$ @. ?            <tbody>
: }  |) ~8 `- q. I3 d                <tr> / F$ b! m1 p2 n- ]- K
                <td>1</td> ' _1 I+ p, g+ V( ?
                </tr>
% Y; n7 U1 ^1 t4 y2 h# ^. [                <tr> 0 U/ t% K; _# j" G$ ^
                <td>2</td>
  l1 u9 @0 w# }# |( ^" m( M2 A4 u" T                </tr>
: Q; n  j  ^# a                <tr> / a) U; D! }0 U/ [) W
                <td>3</td>
: c1 _) @8 |/ Z3 A% n                </tr> 5 E: r/ t) [3 S, s3 _
                <tr>
5 Z! s- J$ O' Q# m                <td>4</td>
( a1 [  a' u8 u5 ]. h                </tr>
1 F3 v$ M, X1 ]' K& \$ y: _5 {- E+ [) G                <tr>
9 o0 u% A: c' ]) S0 @7 I8 p) V" J                <td>5</td> 4 x6 M) e1 z4 Q; t
                </tr> + X4 M+ Y. e8 O, D8 [6 {7 o) L
                <tr> - T" h) P7 h3 F' N
                <td>6</td>
* I. w; k% U: o3 c  ~                </tr>
) s# y( E' I6 I5 ^; A& b$ z                <tr> 7 K  o% D& d3 ~
                <td>7</td> , q( O( b- X+ X
                </tr>
) r2 W* W' t" A                <tr>
( W/ B( j' c) F  ^; R  y4 m                <td>8</td>
( N: H; b+ N0 l9 f8 i                </tr> 0 k# X3 I% G3 a$ p. _  k
                <tr>
6 _2 R# [8 [5 h- Q; v                <td>9</td> & B# Z' Y$ P, ]+ _7 v( M
                </tr>
$ _8 m( c( Y$ p                <tr> & W3 _. t0 X/ c. x
                <td>10</td> & t7 J7 Y  B* G0 Z# \/ d
                </tr>   x" g  n' o# e& M5 J
                <tr>
! d, [% D* |7 p1 S                <td>11</td> + o2 T) d# M1 ?% G
                </tr> ) v) c% X' T7 D: J2 D, t" c
                <tr> & y+ C9 A5 y% M+ x$ t2 v9 J
                <td>12</td> # `! X# s# }2 S: h
                </tr>
$ o; U: Z% C5 ?9 F                <tr>
$ y8 ^8 Q) `, J2 G. m, U                <td>13</td> ! U- T1 T3 o- P' H1 s! X
                </tr>
5 v4 e4 K5 o2 S$ i% e! y! X* e                <tr>
$ d- `7 {" d% e$ C4 s$ @7 W                <td>14</td> 8 M9 P5 _$ C' N: H- g/ `) Y
                </tr>
& r& T5 F: N; N5 @  i5 u7 y( }                <tr>
& M# f# X1 K9 L# V3 n3 y# Q4 [                <td>15</td> ( U: W' K& x" G/ `3 e
                </tr>
4 F& F; S2 R# T" x# g                <tr>
; _" @' g, M5 u/ Y* f0 i3 U2 J                <td>16</td>
$ K, D7 W9 f3 _9 Y                </tr> & p: U; S: Q9 H) U7 q6 Q
                <tr> ! b9 ?! C. d& U* e- B
                <td>17</td> 4 ^5 H% u8 W, l: L; G# i% N$ c2 A
                </tr>
' K- ~" }* \9 a% F                <tr> " R) E+ A$ }. r/ M) ?& v
                <td>18</td>
7 |( |' T7 A8 U+ A- ?                </tr> * H! @# t6 k1 b; v! C& R. h3 o7 M
                <tr> . `3 |  V$ r" {1 u) l
                <td>19</td>
) `+ R: _% o' w) K$ q) e$ Y                </tr>
5 `8 r6 V8 n8 ~0 _  t                <tr> 5 K$ ~7 V2 B. }1 K! ~+ L! v9 w
                <td>20</td>
% J. ]( K, A, V% c: c                </tr> - c3 Q" J/ G7 ]3 Y+ j) w7 @/ H
            </tbody> ! k9 y" Q0 q; ^; a% _+ a, G/ f" l
        </table>
) @& Q% T4 [7 L    </div>
. _. Y% `) K) C* U2 {6 f2 o7 {$ x</div> / b# Q+ @* H9 b# Q$ R
<!--table栏目-->
5 I/ R8 V# a3 {<div class="t_i">
. W" l( l+ ^9 u6 L' Q7 P    <div class="t_i_h" id="hh">
8 r  P+ T/ s3 Z4 v2 ]        <div class="ee">
5 H+ H! N! i* p8 x            <table cellpadding="0" cellspacing="0" border="0">
5 Q% o% ~, Z, q7 a/ e8 i             <tr> + U2 O* \* a0 N2 _$ l9 f/ [& _
               <td width="10%">栏目A</td>
; |- t. Y* q: V" E6 A$ \) t               <td width="20%">栏目B</td> 3 _" [) ]  V2 r9 p- L5 S
               <td width="10%">栏目C</td>
3 e2 D4 g% E3 F8 [  j               <td width="20%">栏目D</td>
/ d; `2 K+ g4 A: D               <td width="20%">栏目E</td>
8 t3 e2 Z6 M. E- W6 |. N               <td width="20%">栏目F</td> + Y: T) p+ I- i$ \, [4 D% B
             </tr>
8 {9 U8 X+ R+ c0 j            </table>
; S8 r+ z0 c6 p. H! H0 C4 x        </div> ( M  m. D" K2 W6 a8 o
    </div>
, K( |7 t' x  ~7 q# D% h5 R    <div class="cc" id="cc" onscroll="aa()"> - t$ |) \8 D" f! X& f6 E
        <table cellpadding="0" cellspacing="0" border="0">
/ d2 c2 u) J, C- ^            <tr> ' D* ]: c0 K" ^2 V! ~
                <td width="10%">1</td> - \& t1 z; \6 x6 q$ S' y
                <td width="20%">1</td> 4 @, ]3 t# O: u- A
                <td width="10%">1</td>
7 p0 M/ V: X9 {. I9 j# _                <td width="20%">1</td> 9 [, |& P$ V' |+ P' f2 u
                <td width="20%">1</td> 0 j/ N/ g1 D+ S* Z8 ]
                <td width="20%">1</td> 6 \# t4 o8 z! g, Q& h1 {8 S
            </tr>
2 O4 Z4 [6 y5 h4 M            <tr> ) U  z4 b& D/ b" v' T" r" ]
                <td>2</td> / ^$ o; A  D, H6 \3 g
                <td>2</td>
, U8 |3 j* l' r5 V! g                <td>2</td>
3 N8 a' |* d( y                <td>2</td>
' A6 \5 \  }- \9 u                <td>2</td>
( _6 R! G' h  w5 m1 s                <td>2</td>
0 W/ @, \, b+ b) q& y6 B- ?7 \            </tr> & H8 x; g1 S9 w: t4 r( d7 s$ T
            <tr> * ~4 w: m7 D# k# @. B
                <td>3</td>
7 X4 n  @+ }( r* o3 H+ J6 s6 X# b0 ~                <td>3</td>
+ f+ M0 E: ^7 |( f) @2 I                <td>3</td> 0 h2 i/ N$ z5 @6 V% Q$ x
                <td>3</td> 6 s9 b' e+ N# Q
                <td>3</td>
( p+ ^6 p2 C( R1 [0 j. H* c                <td>3</td>
$ r1 i( ], o) s, h% W* k/ U            </tr>
1 V( e2 A9 y8 q) k            <tr> ' q% _. w) L) E; G  I4 b: V" f
                <td>4</td> - E7 H, }: |$ K2 i1 T: c% i2 R
                <td>4</td>
: y# D6 a, S; x" t8 B8 H) H                <td>4</td> ( ]* ~9 a& ]- D) V
                <td>4</td> 1 ]9 ]) i& z6 n0 \7 O
                <td>4</td>
% u/ l  }: X1 H- {4 g2 ?. Z( {3 i' F+ r3 t                <td>4</td> ! V; ~4 a  P; S; X1 a' f/ D) Y7 @
            </tr> : n2 K3 y) ^+ z- F# d9 Y$ w8 L$ ]
            <tr>
& W$ E9 E" g" g2 C8 B, x                <td>5</td> ) T3 T  p1 g, G8 }" p0 p
                <td>5</td>
3 Q2 L. @- h' |/ N% s6 u4 v& g$ I4 _$ {6 v                <td>5</td> 4 L4 f) p6 b1 g: J" F2 q
                <td>5</td> 7 e  {. U" u; [9 c$ r
                <td>5</td>
0 n& K% a3 P# Z1 H* Z1 g/ ~( ]                <td>5</td>
5 r0 d: F* h. y1 c0 Q* j& J            </tr> * v: ]& d! _8 H1 _8 a3 |' }& y* J
            <tr> # _$ d, i3 ^5 D0 p% E& G
                <td>6</td>
) n1 G8 D1 {# C- r1 [3 Q( y9 b                <td>6</td>
  d* ?9 u6 U. N4 l+ m! ]# |* l                <td>6</td> ( C- T/ f. c- m
                <td>6</td>
/ e0 ^9 T7 W7 c5 i. @2 R                <td>6</td>
3 y7 s6 U2 u2 j! J. X0 E                <td>6</td>
5 A9 A( U8 A7 ~$ \6 d& X            </tr> . q; G- {0 a' @2 m7 e+ ^9 I0 U6 Q
            <tr>   L9 k% v1 e* w* _- h; t- p- a0 N
                <td>7</td>
- A; m0 x. h8 {! q9 I                <td>7</td> : C3 O4 P- r2 a( ]
                <td>7</td> 0 C) v, u7 H: r" F$ d8 i' c! R
                <td>7</td>
6 M- \! [# |! z( U0 {+ g                <td>7</td>   Q4 n& m( d% |) Y! }
                <td>7</td>
6 X+ k" K! O4 F- p' b9 S            </tr>
6 `, e$ j. J/ Q- M, b            <tr>
" T  g  I( u0 r, C                <td>8</td>
' e3 c. R6 a6 |- f/ x                <td>8</td> + A, r4 y: ^/ z3 [
                <td>8</td>
& S# s& J2 O1 ]                <td>8</td>
4 l* {' E/ h3 q: }! p' f5 O                <td>8</td>
* |: P- R: q0 Z9 z; ]                <td>8</td> + ~) @0 Z! J; {' v! ^
            </tr> ; m7 `- s* e: R* J4 y. d9 ?
            <tr>
8 U* O9 J( v" R7 _6 D7 X                <td>9</td>
0 w6 E% U. V, |$ S# G! R  g                <td>9</td> & s6 y1 R$ ~2 T& j1 m$ M( |$ G
                <td>9</td> + C# D: S' A2 ~# G" K2 a, b' ^
                <td>9</td> & P* d- \. ]/ V
                <td>9</td> 6 l$ e$ r* b/ P$ {# b/ c4 D
                <td>9</td>
5 T$ n9 C2 d" \! J' o            </tr> - D4 L5 L! M% }# `# p6 ?
            <tr> 7 b! k8 R. A5 n, N: ^; R, K
                <td>10</td> 9 F$ ]4 P& a' \% J5 _8 Z
                <td>10</td> . |4 ~  q- V. A+ |* G! z
                <td>10</td> 6 t% h1 a# N+ s) p# ~
                <td>10</td>
  d- q/ ]. W( G7 t! T3 q                <td>10</td> 1 v. z1 B* V" @$ q
                <td>10</td> / _) f% f1 M5 Y' ^* D* k( D$ m
            </tr>
+ S" E6 ?% [. p1 m& `            <tr> - Z9 d- T4 K0 w' y
                <td>11</td> - i( Z' b4 w5 p$ @9 e
                <td>11</td> 9 [. r( i) ]/ P
                <td>11</td> % V5 f/ O& C, w+ m
                <td>11</td> ! S4 {7 U, \. M
                <td>11</td> ! V1 r1 I  z- Y# G$ x8 m! `
                <td>11</td> + Y% X* {) @. S- S7 d5 ~! U
            </tr>
' C( k' V2 F+ o8 {3 d. |            <tr>
& a/ G9 N! k- D/ |# U8 Z                <td>12</td>
4 i; P' z( t6 }4 Y2 f5 Y  w                <td>12</td> 8 u/ @' d; e$ c0 a5 K7 Y$ v! ^' i
                <td>12</td> ; ]$ F5 q2 ?, g3 W( s
                <td>12</td> ; V1 c5 f! Y/ H1 Q/ t
                <td>12</td>
* N. O; N# H& j! L% ^* X: ?8 B$ }                <td>12</td> / |$ ~+ @. _$ \. G1 y* _0 V
            </tr>
  h6 b. r% X1 Q1 T6 \3 [; N* ?; l            <tr> 5 N4 H5 M) r& K& d4 l+ L9 s
                <td>13</td> ) ]* f1 G  w" |* c2 m, K4 A, N
                <td>13</td>
  C; T, J! B$ C8 W7 C) V                <td>13</td> 6 D! m, @5 {# o3 t* q7 u3 ~3 \
                <td>13</td> # z5 O% j' V" P( x7 c' J
                <td>13</td>
" d# d! \% g  A. Y, m- @& M8 U                <td>13</td> 0 o  s# B2 s! K) s( V/ a9 G
            </tr> % U7 e2 N# Z! V* Q; T& r/ I$ r" Q
            <tr> 8 y- _) T/ @8 @, d
                <td>14</td> ( V* e9 b3 n0 H& C1 W# a* A
                <td>14</td>
- W, b2 T( c8 d                <td>14</td> ( f9 n! \1 Z3 L8 w1 g: b
                <td>14</td> ! P/ m/ s  I& R" T
                <td>14</td> ( ?! Z' U2 f" X
                <td>14</td>
" [( E) K' C+ \/ O% w            </tr>
3 Q3 L2 [) u9 L( j            <tr>
8 M8 y- v& r+ o- k# l' f- z                <td>15</td> 7 ^$ b, S& q8 B6 l: m, S) O
                <td>15</td>
+ W* n* \. ~# d, m9 e# }                <td>15</td>
. [9 w( q) E7 s                <td>15</td>
9 B* ^  `  ]$ i: z                <td>15</td> 0 M  D, `8 S4 Q! T! V
                <td>15</td>
0 h( y0 x! ~8 {1 ]  n! ]" F7 e            </tr> 6 t. |' c5 t  [/ _
            <tr> 7 v8 {/ w6 f( Y3 u2 E5 z" {
                <td>16</td> , W7 v: K! m/ q, N6 K
                <td>16</td>
$ |3 X. E' `" H( Z8 Z: W: w                <td>16</td>
3 H3 T# J" E" `$ o4 g8 }( {! T                <td>16</td> 8 H4 c7 s9 S& W! O- X# s. j
                <td>16</td> 3 {% Q. c% C2 J* w0 D/ ]4 v/ u( m" Y$ B
                <td>16</td>
8 R! V1 i* Z& w            </tr> ' q7 n& ~: K) A! |4 o
            <tr> 4 q3 E$ D3 |; f) h, m: y
                <td>17</td> " y5 @0 E# r% y: R- S7 f( @3 _
                <td>17</td>
. _" j8 d- ]0 A7 B& o- P                <td>17</td> 4 R/ W( q% y+ n8 x
                <td>17</td> " U' W# w2 ~" v4 y' `) A! y
                <td>17</td>
- ^% K* n& `" m, Z6 U                <td>17</td>
) f" H. `. e  q) C$ U; Z            </tr>
; j8 P0 `  i7 q5 R7 \4 j7 }            <tr>
' o+ m- t5 ~. `2 A# m0 q' k/ q  I                <td>18</td>
3 x3 D6 T/ ^/ s$ P& k( |                <td>18</td> 5 s( f4 L8 Q5 k+ ?; z
                <td>18</td> 6 _; }: s" N- _- |/ C% S
                <td>18</td> & s" r1 q; P2 \) j
                <td>18</td>
( y& Q" U! n( X! j( ~. {                <td>18</td>
$ S( }& g: \/ Z" Z. s( l4 {0 A            </tr> 0 B4 g% F0 c. n/ ^9 T& ^/ ~9 l6 D6 v
            <tr>
8 x% u5 N& ]( J7 y0 A7 l                <td>19</td> 9 G+ B6 c* H) U% W; I$ h% y! x  e! B
                <td>19</td> ; _8 c# g) P' l2 l' Z; }. p1 d
                <td>19</td>
. Q9 f" n5 S) O                <td>19</td> 8 M7 b4 f$ m8 t" O# j- t
                <td>19</td>   s) O0 `% p0 K5 }
                <td>19</td>
, n2 c5 k* H4 @) f* U7 \) {            </tr> 6 c. Z! L, k: U
            <tr> 5 _# _3 b' Z1 J. x- _% C7 o
                <td>20</td>
& Q5 Z9 |7 J" |* V9 K6 c$ D                <td>20</td> ' e6 l1 E6 J3 j" \
                <td>20</td> 9 k" S1 \1 }4 n6 }
                <td>20</td> 9 v4 O# U- z2 h! W
                <td>20</td>
) _2 \( I+ n8 o/ R1 a+ {3 e5 L                <td>20</td>
/ s. ~3 S3 c5 G, ?7 Y6 B5 t6 V            </tr> & d5 _7 c3 n4 G% I8 z- A
        </table>
8 s& U  O0 w3 ?5 [6 T- @    </div> . k3 W& F+ t, c9 v. U
</div>
7 Z! J- }  ]& k- E. L& Q/ L
作者: Star    时间: 2010-8-13 12:35
给点注释什么的嘛:P



欢迎光临 晨鸟科技 (http://www.chenniao.com/cprofessor/) Powered by Discuz! X3.2