晨鸟科技

标题: TABLE固定表头和行头 [打印本页]
作者: huangxiong    时间: 2010-8-3 09:17
标题: TABLE固定表头和行头
, e6 I+ Y1 \6 S5 g9 j" w
Table标签的固定 表头和行头 可以在有限的页面中显示超过页面长和宽的多行多列内容。废话不多说，直接上例子：* v7 L1 ]1 w* I

1 K, r2 R/ ]9 B& s# q/ X<head>
" y0 p! [6 S6 G! s' I<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
3 q7 b8 y& Y& y) I, J<title>无标题文档</title>
7 d3 r" X6 ], L<style> $ v. r5 C7 g0 Y- b! G0 A
    body{font-size:12px;}
1 X$ `& Q0 e# {+ H& V% R    .t_n{width:30px; heihgt:240px!important; height:242px; background:buttonface; float:left; border-bottom:1px solid #000; border-left:1px solid #000}
3 U! N! {6 ?2 |9 z. h    .t_n span{display:block; text-align:center; line-height:20px; border:1px solid #000; width:28px; height:20px}
) b/ \: k) A' ?: w7 c+ A    .t_number{border-right:1px solid #000; width:100%; margin-bottom:5px} 7 ^& g1 w0 M0 z9 e
    .t_number td{border-bottom:1px solid #000; width:30px; height:25px; text-align:center}
7 u) M: N0 i. D# n, d# `# P    .dd{height:200px!important; height:208px; overflow-y:hidden;}
$ B8 n2 W% g* k$ i( g$ H/ }: G# @0 x: ~
    .t_i{width:400px; height:auto; float:left; border-right:1px solid #000; border-top:1px solid #000}
/ S( b& g1 e' I6 S  A9 ?    .t_i_h{width:100%; overflow-x:hidden; background:buttonface;} % a5 L" F, u5 X) E2 k9 y& b- T
    .ee{width:618px!important; width:620px}
: b6 D: H& \3 l    .t_i_h table{width:600px;}
" S$ b5 g2 H% U! l8 @6 l7 x4 i1 `    .t_i_h table td{border-right:1px solid #000; border-bottom:1px solid #000; height:20px; text-align:center} 5 d1 ^. U! N7 P% ?/ O
    .cc{width:100%; height:220px; border-bottom:1px solid #000; border-right:1px solid #000; background:#fff; overflow:auto;}
: U$ X5 b8 ]! |3 \8 i    .cc table{width:600px; } : Y5 C1 l1 b# g' Y
    .cc table td{height:25px; border-bottom:1px solid #000; border-right:1px solid #000; text-align:center}
& U& o! d( u( b0 C2 p  U; o</style> $ s* x! G- d2 X7 Z- q
<script> & x! X. H! o) _* Q% ~" R
  function aa(){ ' K; }/ H, G6 t. _8 y: b+ i
     var a=document.getElementById("cc").scrollTop; 8 H4 w2 Q, t+ N" s0 \% W
     var b=document.getElementById("cc").scrollLeft; ! w7 h  B* Z5 j6 l; Z: {
      document.getElementById("dd").scrollTop=a;
& y3 A' v# P5 q# K+ e' O7 d) B3 a      document.getElementById("hh").scrollLeft=b;
& |3 G, Y: ]% r& Q. k  } ' E. y0 l$ U0 r
</script>
7 V" S+ [9 v6 }* P2 X: W1 D; k</head>
7 D+ n' l* @  N! J8 V9 L% g* e, F# _8 G  s# g
<body>
8 b/ ]% H$ L, h: p4 E) k3 a- O7 y<div class="t_n"> / T& i6 Q  E8 ^2 G6 [
    <span>序号</span>
! D4 \# \( W7 {8 k) ]1 R# @    <div class="dd" id="dd"> + l6 Y& O& b& S: P
        <table cellpadding="0" cellspacing="0" border="0" class="t_number">
. l) o* e( q% s6 u. u0 S/ g3 h            <tbody> ) N6 @7 _2 u5 w% B
                <tr>
+ B; D& |8 K$ [6 [, Y" H  |                <td>1</td>
5 Z# P3 P! w# V- l" U; ~                </tr> , h' y4 Y9 [0 A2 |
                <tr>
% h  Q- M' n' B0 p                <td>2</td>
+ }% A3 e( V0 z                </tr>
- J. i1 e3 g7 ~                <tr> * Q/ E! G5 C. s/ Z9 q
                <td>3</td>
- _7 D7 X% f  b: {3 e                </tr> 8 {- M: `$ A' H
                <tr>
. l: O2 X: _  J                <td>4</td> 6 n+ T2 L8 w* A# E& A2 e5 o
                </tr>
& H; c. ^  f, q* |% Q8 N2 h- L                <tr>
* y) L6 B2 K9 B% l                <td>5</td> 7 ], p4 I/ l+ x4 X* p
                </tr>
, J( F  P9 d. r* D" R8 S                <tr> 7 A# e) W( I- {& q0 Z. ]7 s
                <td>6</td>
( C  c: {3 q$ B8 A( ~                </tr> % R/ f/ C; j7 i' ^5 I3 T0 x
                <tr>
; [6 G$ |! c. O3 x6 H8 ^' |8 c4 o                <td>7</td>
3 [+ h9 j' s; S& Z3 ?( D3 o( a( |* d                </tr> , Z7 ]( T4 X$ S6 F
                <tr>
# A+ ]' M, q* x' I                <td>8</td> 5 w4 X  R4 S6 T3 u& u8 B; k! e1 v
                </tr>
( n9 N2 ~$ w5 }# a                <tr> ! X! ?/ N" K( y# F2 x& ^" J
                <td>9</td>
9 o0 r9 }9 z& {' O( E$ z                </tr>
( a# o: d  N6 u, t/ B9 Y6 [& Y                <tr> 4 F' L& M# m  m$ r" G% U$ [
                <td>10</td> 9 p5 x4 x! A# i' |8 [. D4 ]
                </tr> ) l$ W- T+ U+ ?/ ?
                <tr>
; P) W' E  d8 r% c2 q: }+ Q                <td>11</td> & O' o/ [1 H8 v4 O
                </tr> . v' y% X' m2 O& k% p" k
                <tr> ' e4 p# p3 g" B
                <td>12</td>
6 }" ]" o- j  i# d. i4 j                </tr>   u4 a3 D8 m3 W5 }- N& L; P
                <tr>
  m8 |2 d. L" S0 e4 v3 w5 g9 g  U                <td>13</td> $ K- f" [2 G! b
                </tr>
! x$ D, J- `0 q( `* [: z                <tr>
" i9 v1 N- N; L                <td>14</td>
0 X0 }* f/ N: m& @' |4 k                </tr> 7 J; Z2 u. \" ]! [( h6 c  B$ S
                <tr>   G6 P- D3 p3 u
                <td>15</td>
; O% A$ D  f2 V3 q; }                </tr>
+ X6 J- q0 M& a5 A, U/ E4 G                <tr>
5 I4 p  e5 |( O* X9 B4 R9 {( T                <td>16</td>
; l9 J- {9 ?! H# G) O+ ]9 S+ @7 s                </tr>
7 |1 q. D/ f4 F4 a                <tr> 9 c0 h$ F# C! d( _
                <td>17</td> , G0 W0 A) l/ G3 [
                </tr>
1 E" O6 y2 P- F( U' K4 ^0 }7 y                <tr>
% o- h6 W& Q9 P9 O3 w                <td>18</td> 8 j# R; T) r: ~4 c
                </tr>   q3 D/ C6 G. N1 r1 A) @* l" }2 N
                <tr>
& M( P7 M5 X1 A8 c                <td>19</td>
% D$ w  y$ w; R( m4 I3 l6 e) U                </tr> ( q- V  U6 m+ P$ W" x7 n! N, m5 n0 Q
                <tr>
5 G- H2 I4 l* d# l                <td>20</td> $ a+ z) l2 h  ]( m
                </tr> 7 Y- O1 j4 y6 M
            </tbody>
7 C8 ]: z5 u0 }! b! L3 J        </table>
" H0 D$ o# S- W$ b! @: v/ d- T    </div>
: f% L3 |9 Q1 R! u0 i: W/ U  t</div> ; h/ n4 y( C: V4 [, e
<!--table栏目--> & ^: k* W+ V3 b1 j* k$ J
<div class="t_i">
. \/ ?5 q( E9 y+ H7 v    <div class="t_i_h" id="hh">
$ V! ^& C! R: m4 f5 `3 z        <div class="ee"> 8 P: o$ v% n& Z: w
            <table cellpadding="0" cellspacing="0" border="0"> 8 v  E/ }5 h+ m& d- L
             <tr> 7 ~; |) X$ }' m
               <td width="10%">栏目A</td>
6 g3 V; {2 S4 }6 c5 A' Z               <td width="20%">栏目B</td> 6 W+ L* h# Q6 S" s0 Z" W
               <td width="10%">栏目C</td>
3 f8 |, Q' m1 k; z               <td width="20%">栏目D</td> % G* f3 Y$ X1 ^
               <td width="20%">栏目E</td>
  t  L& F6 |# r) Q0 A( Z3 A2 i' \               <td width="20%">栏目F</td> $ ?  x0 T4 c% B1 ?$ y/ J
             </tr> ' d: U4 a. p/ ?. Z
            </table>
  e. g* M+ s% S6 u- G+ _; {  {        </div>
. M/ z8 ?: G! ~7 p3 l    </div> : S; h' \( J* M; t3 [: f' E
    <div class="cc" id="cc" onscroll="aa()">
5 s/ G+ ]2 \4 r: H2 V        <table cellpadding="0" cellspacing="0" border="0"> 8 F2 `5 ~2 u" b
            <tr> 6 x6 k, ~3 M3 u  v' \; [
                <td width="10%">1</td> 7 S1 ]% }' d7 u5 |
                <td width="20%">1</td>
9 L5 @# y$ n. n                <td width="10%">1</td>
7 \* C# r! }# W% |8 J7 {                <td width="20%">1</td> ( n( \3 `% H5 Q8 d1 ~2 ^! b
                <td width="20%">1</td> 3 o8 a: D5 W2 _$ {1 K! z
                <td width="20%">1</td>
( z) T5 t( i: `7 z0 |            </tr>
- x5 q% W! \5 d" }, `            <tr>
: V) b- ^/ \6 x8 [  n6 w                <td>2</td>   j7 k. a0 E5 E/ l7 p) j
                <td>2</td>
6 M8 z) W' |1 ^: h' y                <td>2</td>
2 H" y! h: S; K8 @* X, ?: \                <td>2</td>
& C# r' q1 m# d$ Y4 D' _" O) o                <td>2</td> 1 K" @0 Y) _8 F0 G" U8 l
                <td>2</td> 3 F" k+ T: A% n* F8 M
            </tr> 4 h8 ~4 H8 q  n4 Z: u' D
            <tr> : W0 `3 n0 K2 m6 `( K7 y$ P
                <td>3</td> ! |$ A" u$ y. `1 K  f9 Z. r
                <td>3</td> , t# n0 a# J+ Y  s* _* W
                <td>3</td>
$ v) l3 X  @0 N) d0 u) W+ I0 D- V                <td>3</td> 7 x. P6 D& D( \: ~. A5 a9 I
                <td>3</td>
& t1 m: ]; S) [( O( R3 r) Q                <td>3</td> - n0 Z" ?% Q1 f! X# f
            </tr> + {/ G" z1 {' R4 G' U+ \
            <tr>
1 k$ R# c% t* x1 {! E( R; h                <td>4</td> # [1 ]. |* q7 d# F" K
                <td>4</td> / f( Q% ~; L" N" y. j
                <td>4</td>
4 m$ P( ^$ I. H' p3 B" y/ ]                <td>4</td>
8 h$ h: e+ o" A  t, s                <td>4</td>
9 b( x" B* [6 {  B; o" N                <td>4</td> + v2 E! |8 I. n" K' N) H
            </tr>
8 w, ]6 s- s* L            <tr> 6 ~( @6 V8 ^  O
                <td>5</td> , |' E8 p1 O" Y3 J4 _2 x' H! w$ A
                <td>5</td> + s# [( F4 n4 G
                <td>5</td> 9 d" a/ V3 M+ u
                <td>5</td>
+ O+ l9 R  T) H2 J( E                <td>5</td> . T: ~/ @" F3 {8 X7 _
                <td>5</td> ' G8 U6 D7 R2 t; Q
            </tr> + G* b4 D/ ?# Z3 Z+ V
            <tr> + \, e. A' w# q9 G, f9 x
                <td>6</td>
' J2 [3 J4 Z& F! B                <td>6</td>
( z  R0 f5 O) W                <td>6</td>
! P# V5 {  }7 [8 f, {5 S# f                <td>6</td> 4 i  E  ~- O4 P6 p9 X
                <td>6</td> / b! W1 J/ P( T+ N" P
                <td>6</td> 6 R; u& f. t: U1 u$ |0 p
            </tr> # b$ L" V- k9 S0 m0 f( X$ F7 [9 }
            <tr>
  h! E0 r  c) g" b- E( k# ^                <td>7</td> " D. L, p; Q4 |2 |
                <td>7</td> 0 w, r% o1 t2 ^
                <td>7</td> / }) t4 F9 i' X4 F7 R2 F: i
                <td>7</td> 1 k/ X% }, W2 c: T2 {
                <td>7</td>
- O6 }  Z- w( m0 Y6 u                <td>7</td>
# T5 z: z6 J1 T  @            </tr>
$ _6 ~# r0 q+ |$ ~            <tr> $ K  F+ f( z  p( V0 f" ~
                <td>8</td> ; N0 [1 R7 @& ?& o8 y( S3 Y+ p
                <td>8</td> / N8 l9 V; _* S. }6 z) q" A2 e  M  H
                <td>8</td> & }! ~7 ]( X, |0 Y
                <td>8</td> 5 s, \- ?2 @3 q
                <td>8</td>
7 \0 C) p+ A0 x$ T; z$ g* c) \                <td>8</td> 8 D" z! r2 A" t% W: c: f
            </tr>
# F, b* \$ V( y# D" d  ]            <tr>
: O: m' `+ Z* Y1 p& A( K$ d                <td>9</td> / ]# J" g7 {! |2 j2 v8 a) z5 F$ O% W4 M3 m
                <td>9</td> 9 l9 L9 Q2 U1 S/ ^/ {# }1 P8 H
                <td>9</td>
6 G) q8 H3 ~# c( E/ K' o4 e. h# ^                <td>9</td>
3 ?( R4 w3 I/ X% ^, Z: S6 c                <td>9</td>   l$ M- e: C1 {) |5 S9 g
                <td>9</td> 3 Z6 J( Q1 F6 a8 k8 m& u! a
            </tr> 1 K: E" s, L3 `0 I+ `; Y
            <tr>
% l, `' V7 f# `8 x+ u                <td>10</td>
; z, P+ R* B4 B! q+ `( ]- u$ P                <td>10</td>
/ h1 m$ x  R+ l- ]- a. K3 M                <td>10</td> $ S) G9 W8 U- u/ J
                <td>10</td>
: t  D; j  _8 l! A' }' X6 P1 l                <td>10</td> + v, c8 V) m, N2 H" R8 ^
                <td>10</td>
% b7 }* A7 m1 W& K% T            </tr>
' z$ |# B" H- H$ ~! v            <tr>
1 G4 }' p2 d) W5 {9 L; X" ~  v                <td>11</td>
$ _. J* O8 x8 B" j8 b/ \9 w                <td>11</td>
. v# Q# {  j/ d$ i9 Q6 u8 x, T                <td>11</td>
3 J- ?; }# C5 M+ |; [- b. Y+ O                <td>11</td>
* e' N, ~/ p; @2 o2 `" h% J) s                <td>11</td>   q$ [( C( H' U
                <td>11</td> : Q+ l8 |* ^/ y, U( B
            </tr>
! P& }" _* Q3 D  R            <tr>
: s- z! m& Y1 E% i                <td>12</td>
" A! N. L: h, k* |% \9 E) B                <td>12</td>
/ h3 k2 W) A. ]                <td>12</td> 8 g$ `! e  F) s+ m* b
                <td>12</td> % F+ f( o  J1 o- f
                <td>12</td> & f; r' k& @! g( z# R! g. U3 z( C
                <td>12</td> ' u2 \- V  B% K# @+ f1 X
            </tr>
$ J1 o2 j, R5 ~            <tr> + O9 w  Z3 x* V5 ~# g4 f
                <td>13</td> 0 L/ v# D) y# p7 J6 c
                <td>13</td> : c7 X! U" T/ p" _$ C. U1 t
                <td>13</td>
) o( D+ S5 }8 x; Z- X                <td>13</td> 2 e; L, b2 t+ A
                <td>13</td> ! H6 k1 \7 e3 |  \8 ?
                <td>13</td> * a+ D3 p" f) ?6 x6 v
            </tr> ( H& |  G4 ^4 B/ @- r; V
            <tr> : i- o1 k% F) I1 i% _0 Y6 e  \
                <td>14</td> 6 m- l7 o$ @7 s: ^# Q( f" L
                <td>14</td>
, V/ c( S/ ?5 w2 o2 a                <td>14</td>
2 [4 v1 F+ b+ q2 g% ~+ h% a                <td>14</td> 7 W1 ^: O: ?; W0 D/ e  D2 j
                <td>14</td> - L+ z8 e2 h, R
                <td>14</td>
2 G3 `2 E% U  i7 @* a            </tr> , I) v6 j/ k# ?8 A' }" O0 T" s0 s
            <tr>
) N- G3 D" l( x$ H9 u* }                <td>15</td> ) _8 q) z* m4 G3 h- F
                <td>15</td> 4 @! h+ q9 G6 [* ~3 g) h
                <td>15</td>   o3 L9 S6 |% a  {' a" f
                <td>15</td> / V2 [2 ?4 a2 n& s6 C# Z+ [
                <td>15</td> 3 H% B( C. ~. r) U( {1 J( R0 D
                <td>15</td>
# t. e6 F  |* {7 E! \2 Y6 t, x1 ~# H            </tr>
: K. c3 M  {. S2 j            <tr> 4 r% a6 K0 D$ j- `! w
                <td>16</td>
0 S4 s, w) g  }, q- |4 }8 F                <td>16</td>
; o8 }; y: x+ m8 }  A" H                <td>16</td> 2 C1 [0 ^) a1 a+ K; ~  l) c
                <td>16</td>
2 T( Y0 r! U* C8 l  {( Q                <td>16</td> * i9 r6 f% e. \8 |$ w+ J! c$ w
                <td>16</td> 2 i: A9 @$ P2 j' D' w9 U* h  \
            </tr> + k- E) ^4 O3 s
            <tr>
/ D: J, d+ K: z* C" T                <td>17</td>
6 t1 F* n+ e* A3 i9 w/ E                <td>17</td>
. [: y* j; ?' i                <td>17</td>
/ ^1 B- Q/ ]! {9 C                <td>17</td>
' ]2 K/ E6 W- f$ z/ E3 i                <td>17</td> ! `) b9 t  j# c* ~& y( {% I
                <td>17</td> ; W; m, e4 l  P+ F/ q" @
            </tr>
" O7 i1 x- V/ f, I- G1 p& k7 @' k            <tr> " v' q* K, P2 U# R& J
                <td>18</td> : \9 r- z! l/ H5 Z: p
                <td>18</td>
; t+ j4 I+ I3 N" Y                <td>18</td>
% G+ f! G% S9 V' L3 ?' q9 g* a                <td>18</td> ' L/ u# S' k% e4 U" v
                <td>18</td>
/ H" I) v8 ?! H  y. z. F                <td>18</td> ( H/ ~8 Z  q  k. U: y
            </tr> 8 k, ~0 P4 R7 Z) y: S5 e9 s
            <tr> & _2 ~* N# G' x1 i+ ]
                <td>19</td> 8 T3 a& P! F. P3 \& a" V8 p
                <td>19</td> 9 X2 ~1 Q% T  U  u3 A9 q+ q
                <td>19</td> ( o9 s: _/ V: y. H& q5 i; A
                <td>19</td> ! z* ?4 x0 [  }4 U" V' T9 P" j: A
                <td>19</td> # [! h4 v% x% w& @1 j7 C* ^* U
                <td>19</td> 2 W+ F8 r, |; U- T% n% x/ Z) V
            </tr>
: {- c! \" m* \" F6 h) a            <tr>
# f) X6 o2 V3 t                <td>20</td>
/ ~0 ?; s  r* [  R" n                <td>20</td> ( ?' E, |5 B9 Q
                <td>20</td> ( n. s$ Q3 @; W5 X; N# N
                <td>20</td>
  n6 F: T4 u" a5 H                <td>20</td>
* u2 ?  v6 ]1 I) ?1 E3 I, c                <td>20</td> 5 F. M+ B# z. p: I2 z& W! e" A
            </tr>
" p* u: v, c% `4 h, z        </table> ; r/ q! ~: l- U. U% D0 G6 [
    </div>
$ T6 u* q6 N, X</div>
- J0 ~9 f) X0 J+ p3 w0 D" P8 o7 Y
作者: Star    时间: 2010-8-13 12:35
给点注释什么的嘛:P



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