晨鸟科技

标题: TABLE固定表头和行头 [打印本页]
作者: huangxiong    时间: 2010-8-3 09:17
标题: TABLE固定表头和行头
& O; N8 \- t) A4 _+ G. c2 l+ L2 H8 \4 T
Table标签的固定 表头和行头 可以在有限的页面中显示超过页面长和宽的多行多列内容。废话不多说，直接上例子：
4 ~' i# [) Q5 b9 v
  v; t9 V# W& d3 r7 H- ?<head>
/ T! `- H& X3 B% p<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
1 ~5 A" Z, e+ T6 [( j3 j" w<title>无标题文档</title> ( S. `' ~4 x2 z( w5 e5 }
<style>
1 M, X& |/ [  b) M/ `% v    body{font-size:12px;} # }$ y" r7 X; b4 h, f1 Q4 G* {
    .t_n{width:30px; heihgt:240px!important; height:242px; background:buttonface; float:left; border-bottom:1px solid #000; border-left:1px solid #000}
+ H3 {# ~% t, j! V5 I- U( n# Q3 F    .t_n span{display:block; text-align:center; line-height:20px; border:1px solid #000; width:28px; height:20px}
: g( @( _4 \! _' r, i, k9 x    .t_number{border-right:1px solid #000; width:100%; margin-bottom:5px} 7 V+ _! ?# A3 u5 j
    .t_number td{border-bottom:1px solid #000; width:30px; height:25px; text-align:center} - i  {  w, o# q- B) U( j3 H! S+ U
    .dd{height:200px!important; height:208px; overflow-y:hidden;}
' F  g$ V+ o8 |7 [+ V# R# a" b5 r2 w: o
    .t_i{width:400px; height:auto; float:left; border-right:1px solid #000; border-top:1px solid #000} % j4 b2 `1 b# C* d; ~; @6 i$ n
    .t_i_h{width:100%; overflow-x:hidden; background:buttonface;}
2 G5 @6 n; J0 M  y    .ee{width:618px!important; width:620px} : o1 h, j; V5 g3 R. R2 y) i8 S
    .t_i_h table{width:600px;} 7 Y, K, t4 m/ X& p( B0 F
    .t_i_h table td{border-right:1px solid #000; border-bottom:1px solid #000; height:20px; text-align:center}
. z$ D: }3 q  {6 d7 q7 P    .cc{width:100%; height:220px; border-bottom:1px solid #000; border-right:1px solid #000; background:#fff; overflow:auto;} ) }) d  o1 O0 S3 B
    .cc table{width:600px; } & I3 S& f* X& o) u7 G* B
    .cc table td{height:25px; border-bottom:1px solid #000; border-right:1px solid #000; text-align:center} ( z2 Y7 {# G) h9 p) j5 h% t$ U' H
</style> ! r/ d5 a5 U" q2 t5 R8 |6 a
<script> 2 S0 \/ C6 s( G' I! ~# H( O
  function aa(){
6 L! i8 K/ m2 h     var a=document.getElementById("cc").scrollTop; ! q) {  x8 R4 f3 i
     var b=document.getElementById("cc").scrollLeft; 8 {& ^% t( v: S6 j
      document.getElementById("dd").scrollTop=a;
' c6 q. J2 k5 q9 g. W2 c7 h      document.getElementById("hh").scrollLeft=b;
" f$ \# `0 w( a1 Y6 k# C' `1 {# N( v  }
3 ^$ Y( M( Q# `$ I, N4 L</script> * q! t* o' J/ a) [8 Q5 Y
</head>
3 g6 E3 ^3 `& q) n# R* }( G. z
4 }* Q( @( F5 v; a1 n6 W<body>
( R9 U! G$ u8 N! J<div class="t_n">
% X6 p+ q+ g0 B5 B& V& o    <span>序号</span>
: D/ p5 p. k8 L9 E* G    <div class="dd" id="dd">
; D2 X' |: H$ I- G' ]9 H        <table cellpadding="0" cellspacing="0" border="0" class="t_number">
/ e+ p! \% i8 t8 [            <tbody> . _$ K: \" U9 y: d4 r! N
                <tr>
3 W) I) g4 b3 f8 i5 _! z/ n' g                <td>1</td> . k5 A) W2 K4 ]0 L1 e, D
                </tr> + m/ P: v; |& u
                <tr> ' M" b, ]6 A! K9 R2 D
                <td>2</td> , n, v5 b* P1 v3 T
                </tr> 9 P! S- K2 T, U4 H9 O
                <tr>
) x; Q% o& ?0 r: a, g  n0 o                <td>3</td> ! j6 j6 u/ h+ b: G/ i
                </tr>
$ z( J; x( ]. s$ G' v8 C3 c4 L                <tr>
' U# p/ Y" }% h8 a5 S4 Z1 J                <td>4</td> : Y# _' B$ e( K4 j" K
                </tr>
/ W# [. r7 p" S9 k                <tr>
: S" K& L. z* [; g1 u# M                <td>5</td> 2 }5 n* S: {( A
                </tr>
2 h% m: S) a% q" I                <tr>
  H0 V9 V' Q# t9 j+ Z                <td>6</td>
9 W- e6 ]; P+ U! d3 G0 i                </tr> : i3 Q2 o' s+ t; m2 s' }
                <tr>
  c1 @" J4 H! u; e" p/ x0 v" b# i                <td>7</td> 3 l( d8 _6 I3 j/ E% x2 O
                </tr>
- p% k" D$ J9 U, d* Y                <tr> + N6 c- B& p* @: y  F
                <td>8</td> 5 `" J# c) Z* o2 X  X% p
                </tr>
1 U5 y% U0 ~0 U. e7 M: y3 ^5 `                <tr>
4 ?) K5 E9 ?  u. m& |                <td>9</td>
1 J1 K# Q" t  Z1 `! q8 e: a                </tr> 6 f2 v8 N- a! ]5 H# G+ A, U0 N
                <tr>
- q5 I9 d) ~1 b* e: o                <td>10</td>
, N1 f7 U( A3 q+ ]  k1 C) V                </tr>
, m" O7 r7 n1 ~& Z, l% y5 {                <tr> ) E" j0 c) a3 B) `
                <td>11</td>
% n) ?" _7 n- [                </tr> : Y' a9 Q# J* ~
                <tr> % I$ ]$ n, }" _) p0 q8 I% E
                <td>12</td>
& V. Y0 V( t. t' v+ Q0 O9 Y                </tr> ' K0 j" s2 ?8 S6 \+ _- d
                <tr>
& r6 Y2 d2 I. {5 N                <td>13</td>
& i# i; q2 t4 N! |- A                </tr> / M7 a! {0 B9 r. q2 a4 r
                <tr> 9 `5 k4 ^) c( }* K% S' T
                <td>14</td> ! w, u+ d  U( V: U6 t7 |
                </tr>
0 C2 N/ a+ ~4 U% ^                <tr>
4 S1 `' V5 z0 X) K9 }+ }1 E! @                <td>15</td> ' x  F4 K7 {1 C+ a0 W
                </tr> 8 D# q5 z7 Z" U: H" f9 w( c
                <tr> 0 T' V1 }1 R  X: n5 M" b% H
                <td>16</td> 6 U% |+ _* y( B3 I5 d0 _
                </tr> : J7 W3 F' Z- Q' ?
                <tr> 4 _* O! f2 T7 z& e& q
                <td>17</td>
' d# E! `, P9 M                </tr>
& c! D& H, [) `                <tr>
: I1 J' }, v5 ?$ Y0 D                <td>18</td>
0 ?  z& }! e. D, R; u                </tr>
8 G" d. ~/ J  _                <tr>
" |$ j9 ~2 A5 S" n: x                <td>19</td> 3 C; b, J% j/ H- b+ ^# e
                </tr>
# @( y) ]# m- r2 \% w" A0 M/ V                <tr>
, _# n( T) t1 d" L$ B* b                <td>20</td>
5 @& x, b, b2 ~2 l2 w                </tr>
2 z, ~7 o+ u+ ^            </tbody> ; ?4 {( M5 [2 M% p
        </table>
) n! T$ z6 T) s5 Y+ X    </div>
5 A1 a* F$ L! C: Q& a</div>
$ t3 W" c; D$ v<!--table栏目-->
) {4 R7 i- ^0 A% U/ t% d- l- B, D<div class="t_i"> # b% D" {, t  M: Z
    <div class="t_i_h" id="hh">
6 [7 v& y. O5 V, @/ o- M7 O/ a        <div class="ee"> 2 I- i! q( m) T6 o
            <table cellpadding="0" cellspacing="0" border="0"> ; z. ]0 c$ L; R; r: w/ Q
             <tr>
/ n/ X1 p( M6 K: ]9 H- C! l               <td width="10%">栏目A</td>
0 X" Q$ i/ i: A+ N$ V# Z               <td width="20%">栏目B</td>
( X* c3 T& x( G4 ~" I2 X( ~0 x               <td width="10%">栏目C</td> & Y# w3 T+ _1 p; b/ Q
               <td width="20%">栏目D</td>
7 L  H. k) m" Z' ]0 g3 O8 t/ b               <td width="20%">栏目E</td> 1 I/ _: J' n+ a
               <td width="20%">栏目F</td>
* M8 K4 M4 z1 ]- f; I             </tr>
, R  k2 [! [% G* i3 K1 d5 V3 A            </table> 0 d- q% _2 I2 |- C" i
        </div> / K$ J% t- k! {4 J
    </div> $ y( q* e# B9 t; o
    <div class="cc" id="cc" onscroll="aa()">
' h7 f% r- _& t' u" ?        <table cellpadding="0" cellspacing="0" border="0">
4 C2 z. N& S, _. {& Y% t! p0 S            <tr>
& @+ P6 H$ l& k, M                <td width="10%">1</td> & d" _  ?9 g8 G% }
                <td width="20%">1</td>
4 x: I1 a& ^( A+ b% H6 Z: n                <td width="10%">1</td>
, W# k/ L2 P6 I# n0 z- ?                <td width="20%">1</td> 8 G( J( K- G  d0 U
                <td width="20%">1</td>
6 G( R+ O: ]& N, I2 |8 ~: M                <td width="20%">1</td>
" Q# C9 P' ]5 s            </tr>
9 ]  W! `3 K/ ?+ [, T7 d6 h            <tr>   K! ]$ s5 x" [; H2 d
                <td>2</td>
$ Q: B5 m  d& g; R                <td>2</td> ' ?8 |, @# _; _, r9 d$ L
                <td>2</td>
7 y& N0 X! X6 c8 o! Q                <td>2</td>
% _2 i7 `9 N" p  ]+ D4 r4 S                <td>2</td>
2 w- q- g# _9 T  E) h6 P/ f$ \* l  e6 F                <td>2</td> ( N- _0 u0 K! P/ ?2 \- d& W; |
            </tr>
7 h* y) {8 G3 k- T            <tr>
4 C7 i. p! I4 F3 _" o6 n                <td>3</td>
1 Q" n. ]. i- X& C" D3 n2 a                <td>3</td>
( Q8 c% B8 P, I; w                <td>3</td>
/ S* r( B( V2 c% j                <td>3</td> 2 |* }* U2 q4 K% q
                <td>3</td>
7 N/ E4 Q; |5 ?9 T+ j% e) i7 u                <td>3</td> 6 `5 x! a2 B6 a% v) o8 I6 W
            </tr>
+ R  u: ~/ ]4 [! i9 l4 r            <tr> 4 c1 @& m- }: t: \$ P+ e. U
                <td>4</td> 8 _1 M# f0 a3 X1 z; e+ \4 }  `6 O
                <td>4</td>
+ P: {& A3 k+ y1 `* p                <td>4</td>
$ n% g7 o; E+ G& ~                <td>4</td>
9 k, R" u( a8 W1 B$ \                <td>4</td>
; l6 Z7 {7 s% i1 Y" e                <td>4</td>
* N: Z% h8 F8 E5 v6 l% V7 _            </tr>
) @* l- h' L% ]0 H' K            <tr> ( q) q" _% |  R9 N' t% n# Y
                <td>5</td> 7 `" V. K; S- k( Y
                <td>5</td> - Y) A8 B2 s$ O, q* b7 H
                <td>5</td>
$ q8 t& @) P4 A6 q$ R7 D                <td>5</td>
, l8 I' ]# K' B" n9 E. f                <td>5</td> ' M9 x9 G7 I$ P5 i+ n, k
                <td>5</td>
. L1 L- r; Y8 \2 `" u; N1 ^, E            </tr> 4 k* A5 E4 V. S: I; Z
            <tr> * r) U% R9 \. c, F9 b& ^0 P
                <td>6</td>
. W2 I3 y! S- ~' h                <td>6</td>
! {) V$ k" H7 A. \  a0 s                <td>6</td> . e2 L! O& V; o# V% b3 W/ n) o
                <td>6</td> + ?" |" f( d, W: p7 A" \8 x/ k, E5 l
                <td>6</td> 4 K6 ?" s& r% M. l6 d+ ]
                <td>6</td> ! g3 k! S; G  [- k/ J- m
            </tr> " F, D) a; x& d9 G0 Y. D
            <tr>
0 h& \, b8 p3 n, \                <td>7</td>
" r# p% f( R, p5 B- t5 L                <td>7</td> - ~$ u& O4 P/ e4 a4 @( g
                <td>7</td> - x* j. C6 C: ]9 ?& U
                <td>7</td> * X, A" |# ?, m5 X  @
                <td>7</td>
! F  x2 J  a  o1 v2 D& W                <td>7</td> ; X) I2 I& I5 w
            </tr>
7 ^. c3 O: c8 U2 B5 }4 F            <tr> " q0 t3 B+ F+ y
                <td>8</td>
3 N$ w0 i% R* A, z$ c: Q( K                <td>8</td>
1 y9 c7 J$ ]' l, T4 N                <td>8</td> 0 z  H' f5 Q! H% A8 X! p/ A
                <td>8</td> 1 N6 t: g& p6 V. a4 S
                <td>8</td>
3 O- i0 k. |; U( p: V, N                <td>8</td>
  a6 y( Y7 G7 I- ^) [            </tr>   P) ]& [+ S  E3 e: p6 j
            <tr>
; J+ |, \! R( c7 d                <td>9</td>
; J: E: _/ X, T' X- P                <td>9</td>
# H, K: l, M% c/ S                <td>9</td> ' G/ I/ ^/ u" H$ p& j2 T3 R
                <td>9</td>
% m- _9 p% N" A1 `$ d# r& F                <td>9</td>
2 \3 U, |/ j& ^6 E# X; B                <td>9</td>
; C2 b8 x& v: S6 `& \            </tr> ' Q) {/ `* F& x+ T& P3 t" v" O
            <tr>   h% a" f* P: f5 }
                <td>10</td>
; _4 t( s* ^0 p, P+ V2 V5 y/ A. x! h                <td>10</td>
- O; A2 Z# M4 l  M                <td>10</td> 1 c( G# t/ G4 o0 _1 B
                <td>10</td>
/ G  c. U$ @+ ^* L3 E                <td>10</td> . H2 S3 b3 G3 F- a9 E+ |) U
                <td>10</td> " i! z9 g* t" T+ x/ f" n
            </tr>
) c, B! }6 M* J' W            <tr> 3 u( w% a2 J- \% j
                <td>11</td> * L  e3 C. D" T/ t7 z; t) c( r
                <td>11</td> 3 j1 x: N) o$ P) ^) N9 U5 ?! j+ r
                <td>11</td>
' k! ~0 a5 x- |1 A1 l                <td>11</td>
$ }0 j! s2 f1 d/ J) U                <td>11</td>
2 _6 t- S5 b' d/ @# s* Q! }5 ~: l                <td>11</td> . s/ F. t1 z9 z5 G$ T
            </tr> ( Y" u: N+ V# `: s
            <tr>
2 |* [) t, O2 x- Y  U5 I' W% g, S                <td>12</td> . M9 P% s8 O9 k+ G0 L3 c
                <td>12</td> 0 w8 r1 i, ]% w
                <td>12</td>
) Q6 p3 S: d" m+ E7 M$ c                <td>12</td>
0 s8 R8 v" U1 b: |! @" u9 f                <td>12</td> + o2 Y& X3 H8 @* X1 b8 @
                <td>12</td>
% N7 O' w7 i7 y2 D7 z4 O            </tr> $ B5 k; [- m* J2 v+ j
            <tr>
/ u2 ~. Z4 H: q  ~5 U( H                <td>13</td>
0 G. n: W: g. y% g4 a$ c                <td>13</td>
3 L* Z8 n/ Z# \( h. U: ]                <td>13</td>
% t) t6 p9 ~5 i7 i                <td>13</td> # A, |. [* P4 K  r5 }
                <td>13</td>
/ T1 Q: P  {/ n# F$ b                <td>13</td>
( G4 M9 F* h7 n) c$ C# p1 }/ P            </tr>
) |# k3 K" h% n) u            <tr>
8 m0 [3 j  h# h0 ?2 r9 _                <td>14</td>
$ ^* n3 J( H$ E8 T( j0 n3 e0 D9 ^                <td>14</td>
, a  }. k+ H* \- t# v; k6 o                <td>14</td>
& W9 u+ w4 i0 V- D9 z( b                <td>14</td> / X8 U" `1 D) w; W" S7 ~  X
                <td>14</td>
/ |% B4 Y* ^2 C( g$ \' ?! f& M                <td>14</td> , A/ Z! g/ |6 g
            </tr> / [( {4 U, [* N' S4 s5 u1 {' }. ]( Z
            <tr>
" x, t$ j8 S9 i/ I) T                <td>15</td>
, ?0 S4 L" y7 b" T                <td>15</td>   d2 M2 g/ a2 n' u
                <td>15</td>
3 L1 h/ b* p) c! j( Y8 a  G2 Z2 e                <td>15</td>
! }1 u5 o4 x+ l9 t                <td>15</td>
) B( Q* ]% R4 N* |7 g- F                <td>15</td>
" H$ v) v0 I# \) @7 S& [            </tr>
3 Z3 T, c. Y5 a3 a            <tr> 6 R, ?. O! X( q6 _* H
                <td>16</td>
( T( o7 R3 l6 B# X4 o" g+ w                <td>16</td> 2 }: D- z3 K8 e, S9 K2 u
                <td>16</td> , s/ v9 h6 K( p- J
                <td>16</td>
9 M( }/ o) q  p  j0 ~' M                <td>16</td> $ Z' M+ z1 X1 F8 X% W& f
                <td>16</td>
. \; M1 c( \) g- q  `            </tr>
, E# R+ Z, i3 X            <tr>
+ b* t* T( c' q8 j6 t  @1 ?                <td>17</td> 1 H0 i1 i, L" j) p0 j, V
                <td>17</td> ) _; x1 V" e( Y' K
                <td>17</td> 4 R$ U; h: l7 T) ^
                <td>17</td> 5 n- b$ j) ]% h* i! M% l
                <td>17</td> & [1 M5 x: w* m4 j# v: Y- d& H' @
                <td>17</td>
! I& _6 {. ^- D/ r            </tr> 1 W7 ?9 D: k% @& E) H
            <tr>
  t5 |- Y4 C  s9 |8 N                <td>18</td>
/ S2 y0 w7 v+ \; I$ Z                <td>18</td> 2 k4 ?1 k5 z8 j( Z% C
                <td>18</td> ; P, C' q' T3 Q0 x6 t1 ?* x3 F( B! n2 R
                <td>18</td> 2 k- [* ~2 a* n% b3 G, \$ l
                <td>18</td>
" G+ Z( h' D$ m$ y                <td>18</td>
5 b: Y/ C6 X/ U. C/ _            </tr>
& m( W9 C6 B, F( R& _            <tr> ! k2 ]; l3 ]: L' R
                <td>19</td> . [4 W) `3 e1 @; k' G
                <td>19</td> ! `' W: U% Z1 @' Q1 m1 V- M# u
                <td>19</td>
5 T4 G) |4 Y5 c9 j# f                <td>19</td>
: `) ^# w% K. S2 Y' l) a                <td>19</td> 5 E: ^; [/ F1 X8 q) Q
                <td>19</td>
/ U9 I5 @- L; o& H            </tr> ; @' R3 B/ Q4 C2 P- A  A
            <tr>
5 u1 K$ g6 j8 N( u7 g+ Z, b                <td>20</td>
, t& y/ V0 u/ p+ U( a                <td>20</td> ) o/ g5 x; |" r
                <td>20</td>
6 H+ d- U1 I- U9 m                <td>20</td>
  O( J% q; k7 V7 ^9 Z, {4 W. ?                <td>20</td>
, k1 i  K+ l: B1 o6 z0 I. ]. u                <td>20</td>   K2 ^! X8 r1 Y) i4 F' d5 B
            </tr>
6 j1 i& o: K7 J! E! ~        </table>
" V) I! B" W+ ?% o7 T    </div> , j1 R' \: K" J. }4 c
</div> / P1 k4 R8 B* U/ f
作者: Star    时间: 2010-8-13 12:35
给点注释什么的嘛:P



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