晨鸟科技

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

3 T) T; v  G5 {3 i6 m$ B' p& oTable标签的固定 表头和行头 可以在有限的页面中显示超过页面长和宽的多行多列内容。废话不多说，直接上例子：
2 n0 B2 C# [% u) u. Z3 S
% q! A& c' w0 L<head> $ r6 @4 E) ]* u; Y
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> / H8 b9 U6 V) {
<title>无标题文档</title>
# S8 \" w3 B5 z5 X+ {" f* x- W6 F<style> - S: a7 u( v( \
    body{font-size:12px;} 1 k. G6 j; z) K9 A
    .t_n{width:30px; heihgt:240px!important; height:242px; background:buttonface; float:left; border-bottom:1px solid #000; border-left:1px solid #000}
3 x4 N' P1 y! F: ^/ K) ?    .t_n span{display:block; text-align:center; line-height:20px; border:1px solid #000; width:28px; height:20px}
6 a# W7 h  G; Q7 _4 b  X    .t_number{border-right:1px solid #000; width:100%; margin-bottom:5px}
! Z, _- p! ]6 R/ z& ?    .t_number td{border-bottom:1px solid #000; width:30px; height:25px; text-align:center} " t$ X* g8 i% G, R5 R. h
    .dd{height:200px!important; height:208px; overflow-y:hidden;} 8 a! r" H& w4 V9 ~3 h
: C6 O% ]( i0 o$ h  X& R% I
    .t_i{width:400px; height:auto; float:left; border-right:1px solid #000; border-top:1px solid #000} ; @' f# @; z9 Z) \% B9 g7 A
    .t_i_h{width:100%; overflow-x:hidden; background:buttonface;} ) V) n6 N# Y6 \1 J" W8 }
    .ee{width:618px!important; width:620px}
9 Y/ C  y- \# o+ I* r4 I    .t_i_h table{width:600px;} 7 A  T6 ]+ k2 U9 }4 s
    .t_i_h table td{border-right:1px solid #000; border-bottom:1px solid #000; height:20px; text-align:center}
+ t* e* p& ]5 F/ w! V3 z8 V, {    .cc{width:100%; height:220px; border-bottom:1px solid #000; border-right:1px solid #000; background:#fff; overflow:auto;} ' y! z! a/ v0 C. c
    .cc table{width:600px; }
. a0 S+ x$ b  f2 F3 Y4 w! E# g) c    .cc table td{height:25px; border-bottom:1px solid #000; border-right:1px solid #000; text-align:center}
& y6 r0 }8 h7 V& }; y2 i; U</style>
7 t( V; ], Q7 [* Z<script> 7 l; w: L2 S" [/ o+ J3 r$ J
  function aa(){ , _" z" r6 a7 x% L$ ]7 J
     var a=document.getElementById("cc").scrollTop;
' G- |( d$ |6 k1 L1 C; i: W     var b=document.getElementById("cc").scrollLeft; . L7 U; U6 j" r
      document.getElementById("dd").scrollTop=a;
, ?! \% D5 Q+ q2 k      document.getElementById("hh").scrollLeft=b; ( M. m4 G& D( U
  } # ^' q% E+ ^9 ^  T3 ^
</script>
! U# N2 V4 |+ V# g( V& r* ~</head> 1 J6 b7 |) F1 V& n+ S. f
- f+ V5 n9 T; }2 A8 _& E4 e% ?
<body>
$ c- Z: j% c# N% h; e<div class="t_n"> 3 S8 O+ C6 C7 E  M8 ]/ B% ^
    <span>序号</span>
0 ]5 j1 _$ u0 V% Z9 [/ T    <div class="dd" id="dd">
6 X* @, j8 ?4 E$ [; ]' V, j        <table cellpadding="0" cellspacing="0" border="0" class="t_number"> " N0 O% U  b/ K  d) t
            <tbody>
# q1 E" y6 H+ M                <tr> & d+ p0 @8 w5 p! e  H
                <td>1</td>
2 @4 p4 M: ^) ^# W+ j+ [/ `                </tr> 5 K, ~0 e& z; P$ @6 g& ^
                <tr>
- R! Q; ]! }1 w                <td>2</td> ! x, _* h% s8 R& {+ r! \
                </tr> $ b$ y6 o: C* w5 n; z0 d) c
                <tr>
- t" u$ T0 ]0 n+ p" y! s                <td>3</td>
" Y, A" ]4 O& A* Q7 w8 n                </tr> & l5 m/ x2 X' F: F) H1 x, {
                <tr>
9 C# W  ^: J/ V  B+ c" l                <td>4</td> % @& |/ j# I; y
                </tr> . T# }+ M  h5 c) _' @
                <tr>
- ~; C! _/ k) V" |+ D. V0 W3 I                <td>5</td>
- j& p$ J' s" o' ?4 S* e                </tr>   |+ V2 t1 M7 @3 O
                <tr> , |  p/ O: \4 G- {  U
                <td>6</td>
2 P* W( c& a# X$ d' |! T$ m                </tr>
& n9 p1 I9 ]: F6 ~                <tr>
4 z2 p+ o) C/ W                <td>7</td> 9 [, p3 H0 U, y1 F. n
                </tr> , O% [& ]/ h. N- m+ x: [% b7 T. B
                <tr>
5 f9 o4 J- ?' j  F  Q4 Y                <td>8</td> " A. x) |, V4 b/ i0 N
                </tr> 3 A  _6 C. w* T# t* m
                <tr>
  o% H+ q0 m7 O- }* P# z1 v  X. [                <td>9</td> , l8 C3 O; r2 A! t
                </tr> / _; s4 p, r$ X6 l- {# w+ L" P
                <tr>
3 C% {3 l4 V) \                <td>10</td>
' z8 M- I4 q2 Y                </tr>
# U; q9 i3 ~* Y: `4 B                <tr> 9 e0 h) b; r- J  P
                <td>11</td> & T- w6 g2 J- g3 S1 y# }
                </tr>
6 l' Z) E2 ]3 ~. P- C                <tr>
2 ^9 G, f9 j# _5 C                <td>12</td> ' \9 N/ O  [1 G: V1 |/ q1 {! H
                </tr> 1 `& {9 C! G) S8 ?
                <tr>   s! t, O+ Z& T; z
                <td>13</td> 0 J# t# `0 m* h9 X0 W4 M5 H
                </tr>
' O/ d# v% {* g' f# \! A' L# P                <tr> 8 o( ]4 S* z: g8 k  X
                <td>14</td> # u9 Q1 I, q% l. j0 y& F& }
                </tr> % w: {3 }- U, w1 c! Z
                <tr>
% R3 U* C$ Q* u7 m- _                <td>15</td>
' d& m+ A) N7 Y- y7 B* {) r                </tr>
, [# M1 R9 v  g. e. _                <tr>
: {$ D4 u  y( ]2 p7 X                <td>16</td> : w# U0 K5 N5 e6 `' a
                </tr> ) d; S# ]" ^/ C& C+ P
                <tr> 4 _2 ]6 l2 j) A
                <td>17</td>
; x; A2 J2 Q, z4 o3 Y                </tr>
6 `- ^: U. Q, P5 e7 ?                <tr>
; L) _; X1 E" r9 w& J. r                <td>18</td> + {. p+ T+ ^5 Y7 O
                </tr> ) z7 P6 H5 f$ D: L/ U8 Z
                <tr> ' ?/ w9 C6 N2 H# x
                <td>19</td>
) S9 ]9 E: u3 P) i, E( W                </tr> 6 q8 ^0 m- R' O; ?
                <tr>
% R! H  c/ i& b( Z                <td>20</td> 7 v/ |  W- `" ]. p" S
                </tr> $ \+ ?6 u) S4 U, R, T
            </tbody>
1 G! W% T# W7 F7 [$ t! C- Z. D5 W8 i        </table> 1 `+ `/ s! p; C
    </div>
$ {! h' Y1 y) {2 c; X0 [- V</div>
# d0 l3 x5 \6 U& F1 j: n: }<!--table栏目-->
' d" E( J6 M' _: n" s% @* s<div class="t_i"> + T% }% J8 v+ S9 _, r& A' _
    <div class="t_i_h" id="hh"> . i; Z$ k3 Z0 b; n+ U5 {
        <div class="ee">   u; h2 j8 u) B! {
            <table cellpadding="0" cellspacing="0" border="0">
3 M1 Y& ?, z& b             <tr> , [& ]/ ]0 C2 g
               <td width="10%">栏目A</td>
7 X# K' V5 O. [: t8 x1 e               <td width="20%">栏目B</td>
2 D0 }) Q+ Z# Y! a               <td width="10%">栏目C</td>
0 I2 k$ k' V! \, l, _3 d8 H               <td width="20%">栏目D</td>
& \5 \& q+ v6 [! h( l! A               <td width="20%">栏目E</td> 3 z4 x+ r  N: G0 ?  J
               <td width="20%">栏目F</td>   S$ _/ O( I( G" l8 A# L
             </tr>
2 F- |% ~4 b3 ^% D9 x. t8 b            </table>
- Q+ P# H# t) |+ Q; o: ]9 C        </div>
7 r( J3 r( K! S4 m8 ?    </div>
5 f# ]+ v0 {0 ?4 {8 Q9 e' E: b    <div class="cc" id="cc" onscroll="aa()"> & t& C' y0 M* r" c- y
        <table cellpadding="0" cellspacing="0" border="0">
) i( p( P1 W: g" l            <tr>   q% B) Z0 e! u
                <td width="10%">1</td>
1 t' M- B- y) C  t% f7 A                <td width="20%">1</td>
/ w3 K/ v, y# C! b9 u                <td width="10%">1</td>
" u' x" F7 s' ]1 w                <td width="20%">1</td>
) J, S% w8 o( r( u/ H/ E                <td width="20%">1</td> ( F: K. B6 g! W6 ?
                <td width="20%">1</td> 5 Q/ U  }& S" ?
            </tr> 9 n2 q, _8 T3 Z$ V/ [+ b
            <tr>
$ n/ M0 X. a  y  c+ R- V                <td>2</td>
, T; V2 H! x' X/ z; g                <td>2</td>
+ G& ]( a% j# r) j                <td>2</td> 8 o: ^- F0 ^  k' d
                <td>2</td> - W* J! W8 w0 Y) b" T
                <td>2</td> 4 i: ?4 r$ G5 _
                <td>2</td> 0 J( L" J7 B9 Q- n+ ?3 o) l
            </tr>
7 f* y) S; y  s" ], t  T4 {. G            <tr> 7 Q4 _( E; U  W0 b( X* _+ @5 M
                <td>3</td> 0 k* V% A3 b( H, a0 x# Z  U
                <td>3</td>
. S% d9 x- }4 h3 f* \) i6 t1 |8 U                <td>3</td>
1 N7 I3 l$ B0 J8 ?                <td>3</td> 8 U  c5 ]5 R9 Q, o0 @0 [
                <td>3</td> - L" G+ n6 {* O$ E+ |2 R
                <td>3</td> # x0 O& ]: E9 g( j/ D( D; k
            </tr>
% h9 a$ w: l' l& E4 X& J1 C& F            <tr> & Y1 N; F8 l. K! J' f) v+ m7 b
                <td>4</td>
5 U/ ?1 n. G0 E6 A' f7 a                <td>4</td> % M7 n1 }. E/ f0 s/ ^
                <td>4</td>
$ V# g6 B# }9 y9 e  q2 m                <td>4</td>
4 O" q, @% Q2 e3 H  P( ?                <td>4</td> 8 a' r2 @' C7 _8 o1 n" _
                <td>4</td> ! H: t: I3 t  t$ N9 M
            </tr> % x  l4 o! D+ [& R* F9 X5 u
            <tr>
# V; V$ |& H9 D' K5 y                <td>5</td> # L: y7 I% J$ E$ |
                <td>5</td>
& b" c7 }0 K. N' q8 e                <td>5</td> 7 X2 F" k" j" k, Y( Y8 ]3 {
                <td>5</td> ( }% d$ b# e' K7 \  I9 w6 \
                <td>5</td> & {/ v# r/ G2 k9 \8 U
                <td>5</td>
9 _4 A' j" @% ~8 Y& f9 n( l1 e            </tr> # a2 C1 y, H  K, A0 w: m, n; s! u; }
            <tr>
# ?) f8 `3 @+ `9 u* I* n                <td>6</td> % L2 d3 U1 y% B' x/ H$ P' v8 h
                <td>6</td>
' ~$ g9 l3 Q: m) E" U+ `" z                <td>6</td> # W0 ~4 D8 @1 U1 d6 B. [
                <td>6</td> ) [" G, J7 L+ [, m+ r
                <td>6</td> 2 F; X" H& i8 S% h' o
                <td>6</td>
8 e4 \) q* w9 z" J" f            </tr>   b( r3 x+ d# H' T( y
            <tr> ( v6 B7 q' {" R: h  \5 l3 J
                <td>7</td>
0 ^3 |) p% {" E7 m7 Q                <td>7</td> + H  k3 d% h+ u: c
                <td>7</td> & \0 y( V$ l5 E
                <td>7</td>
4 H( C& T4 U5 B5 o4 E1 @. D/ Y                <td>7</td> ) o  I; [$ x/ ~: I7 f  q7 u' h: ]
                <td>7</td> # w2 @8 T5 i; Z( p) ~9 p- h* v# b
            </tr> ' V( b/ E, ]7 V* U' _! {& Y
            <tr> # K$ L; v7 t- B+ {$ i+ v
                <td>8</td> $ I' q: {4 k  V2 R+ i  z' Z% G
                <td>8</td> 3 }. v" o' ^1 r) s
                <td>8</td> ) _) q* h$ w  W0 j$ J( U
                <td>8</td>
* @4 U  j4 z' ]* f; h                <td>8</td>
1 q+ z( i' N2 M; d8 p4 x                <td>8</td> , _$ W+ A" o5 ^: f# [( S
            </tr> : A8 f) h' N1 Y8 y/ t- ^
            <tr>
6 w9 F+ b7 f8 \                <td>9</td> ; X) p0 i1 m! _# x
                <td>9</td>
6 l2 b; r* w7 ^. i* X7 O. o                <td>9</td> ; z( u% P5 [+ z2 j# H
                <td>9</td>
6 u" V$ d: h( C4 q+ M6 e& ]0 m' G                <td>9</td>   x. s: i4 m+ x) {' `
                <td>9</td>
( v1 _& D! ]% b3 K            </tr> & a( S. b) s  m
            <tr>
9 r; _! Y* S8 Q, v, {' u1 e                <td>10</td>
" J+ z# }# F% t% |$ H                <td>10</td> - I8 {+ z- v7 M) j9 [
                <td>10</td>
$ @& S! `4 R$ ^! p                <td>10</td> $ q- g$ e4 E$ s# }4 l0 [4 c' W1 E" q
                <td>10</td>
) B7 c( d6 }% n/ [                <td>10</td>
6 Y) b7 k/ K, B; J* o5 d, K# a            </tr> ) h, T; |! `! S0 K
            <tr>
* d: o. z; u" n3 L# L; F) {                <td>11</td>
" _# ]* b+ }, t# D: J, e+ @  n6 d                <td>11</td>
; j+ a9 o9 j/ z7 W% J7 ?                <td>11</td>
. ~7 K. W2 v, H9 |                <td>11</td> 4 Z4 I8 L% O/ B& s3 O
                <td>11</td> 5 `& f& R9 F& f' S
                <td>11</td>
" k: H$ B; E; A6 ?            </tr> 2 J- w. j8 {7 J1 z# n# M0 o% w$ S1 B
            <tr> 8 Q5 q( w5 ^: j! K, y4 S8 F1 y
                <td>12</td>
2 u# n  F( k& F- C0 ]4 W1 M2 L                <td>12</td> 7 ]5 A) H. A7 ?8 D! s+ T, t
                <td>12</td>
1 m) M; a9 U$ x                <td>12</td>
+ x- h! ]) x' ?. ~& e' r" r2 H                <td>12</td>
# f( Q! {% I+ Z) U9 k. t                <td>12</td> 0 i7 t  I& Z$ n& S* f
            </tr> 4 n& ], l6 f+ D0 _6 y, h3 \. n
            <tr>
# M! x  j; d; J4 E" v* A9 S                <td>13</td>
% ~; W/ Z2 y' p0 T6 l                <td>13</td> 7 i" x& Y2 t' S* Q; v# v9 C
                <td>13</td> 7 h$ J% L4 H( ^/ O- i+ U
                <td>13</td> - O2 T1 |8 R/ G; Y- _
                <td>13</td> ' F- h7 A  J+ a- e& V  ^
                <td>13</td> $ [2 X' d+ _/ T  W8 o
            </tr> * O5 ^' C' Z1 O3 U  d
            <tr>
# A7 Q2 q. {* _; [6 [                <td>14</td> + i/ T, R  p8 ~' Y# q
                <td>14</td> , C! p+ S! m9 N- J
                <td>14</td>
: m$ A+ O5 q+ F& a6 X) n* X                <td>14</td>
+ F$ H0 [1 f) R                <td>14</td> : R/ H3 y* \* W& Z5 j+ N
                <td>14</td>
4 f/ `6 h" V' d( e            </tr>
1 v: m" G* O: z4 _' L4 O            <tr>
/ `7 `2 b% {  |4 m                <td>15</td>
1 j+ g7 D7 I% e" v, v                <td>15</td> % l& i8 G) Z( h( b- }' L# w1 Z
                <td>15</td> ; U) [' [1 w5 J" z7 v% I
                <td>15</td> ' T) t+ b* h$ l
                <td>15</td>
# L3 |) `" J' S6 x                <td>15</td>
: o: f: H  a- _/ G            </tr>
' @; ]% X( |% u6 \; f% E& E            <tr> 4 m8 g$ t: b6 H" p
                <td>16</td> ( I1 D- Q8 ^& ^9 N# I% \9 W
                <td>16</td>
& S) \$ o( m+ U! E& X; |" A& S                <td>16</td>
5 G4 z5 k. r4 @3 l! N- c  P                <td>16</td>
1 J# O  H) k# \                <td>16</td>
6 E) `  q! X+ G+ g0 D4 Y' j4 C$ d                <td>16</td> ; a. u7 e2 g) j; B- P9 D
            </tr>
2 a$ G/ Y  ^! G            <tr> " \- i- d( P0 G
                <td>17</td>
# X) F& @* W& {9 t6 v" B0 Z" w                <td>17</td> 3 z5 ]" R4 t+ {/ g1 b; w  V
                <td>17</td>
7 f( p( _/ J3 v8 T' k0 k                <td>17</td> " k2 F( m0 Z( r$ O+ \& K
                <td>17</td> 3 R, c: ^. A0 E9 y
                <td>17</td> ( h3 q4 r" q; G# [, I% j
            </tr>
2 c% ^) e" R$ g5 s8 T            <tr>
8 g" |  G% _+ J: {/ f9 G; Q" t                <td>18</td> & m' V8 `1 O0 x' r! H% Q' F
                <td>18</td> 6 C" a' D5 C, }
                <td>18</td>
6 q% r; s! n( H; G  G. B" }                <td>18</td>
3 k* `6 }+ f* ?& y. t* X1 x8 |                <td>18</td>
! C7 _4 e% A/ j' i' H                <td>18</td>
  q8 B9 w9 Z" j. o, D  U# s2 F            </tr>   T, W$ u1 ]! }
            <tr> 1 V" T+ X' f+ Y; Y1 j% j
                <td>19</td>
. e$ @- ]  H( @* w' _% A                <td>19</td> & I# e# K  s  N3 I( I9 L
                <td>19</td> * p: |% B5 b+ n" `* N# w0 ^5 i% J
                <td>19</td> 4 t8 y- b2 i6 x- [) s  ?* s
                <td>19</td>
3 C( f4 d+ \; X  V6 a8 a                <td>19</td>
( D6 C% Y% A/ [6 J            </tr> + [& C7 n1 j0 I  c1 Y. d$ U9 i
            <tr> , S9 U! M- a; t; d3 t4 D
                <td>20</td> 1 e- a. H/ x# \( \1 ^9 [( ^. c
                <td>20</td> ' Q; |0 [6 l: ~! s
                <td>20</td> 8 Z, L& o8 h* i1 u; m5 F0 W
                <td>20</td>
3 T4 h, _6 c) T; G                <td>20</td>
- d6 F2 v6 R7 ?                <td>20</td>
/ ~" g$ H4 |- c0 v            </tr> 9 x, g6 R% T4 s; p$ K
        </table>
" p, L& @$ a2 K' T$ l6 v    </div>
% T! V- Q! R4 i; k</div>   }9 f9 Z6 d$ d3 x) K) C
作者: Star    时间: 2010-8-13 12:35
给点注释什么的嘛:P



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