晨鸟科技

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

0 A1 v+ a1 b1 ]* t3 v( ?Table标签的固定 表头和行头 可以在有限的页面中显示超过页面长和宽的多行多列内容。废话不多说，直接上例子：8 F$ r# _- P5 c5 s; ~! _

3 [, Z( p2 W, h9 ^7 p2 f; e. M<head>
, ~$ ]- o" Q1 p5 c0 u* V4 i<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
/ g3 |# `+ ?: C<title>无标题文档</title> ; K( _8 i9 z) ?) c0 a
<style>   I2 ^8 H, F1 }4 T
    body{font-size:12px;} 2 m! l" G1 J$ y  h; O, D: m
    .t_n{width:30px; heihgt:240px!important; height:242px; background:buttonface; float:left; border-bottom:1px solid #000; border-left:1px solid #000}
) g0 ~! s. s; x" m: y" d! B    .t_n span{display:block; text-align:center; line-height:20px; border:1px solid #000; width:28px; height:20px}
5 m- C5 a9 G' z    .t_number{border-right:1px solid #000; width:100%; margin-bottom:5px} 6 z* s2 X& p. Z' n' @" a& `
    .t_number td{border-bottom:1px solid #000; width:30px; height:25px; text-align:center} & G  b9 \+ |/ P: H9 m4 }1 Y* J
    .dd{height:200px!important; height:208px; overflow-y:hidden;} ( [; O, r- d! {- D6 x
+ v1 A9 j: V0 j
    .t_i{width:400px; height:auto; float:left; border-right:1px solid #000; border-top:1px solid #000} 2 G( L- j' m# i& c( W3 |/ |
    .t_i_h{width:100%; overflow-x:hidden; background:buttonface;}
. o7 t! v+ B5 b8 |) T    .ee{width:618px!important; width:620px} % `) ?' ]) i$ V& ]8 Z& t
    .t_i_h table{width:600px;}
8 ^3 O* t) R  a    .t_i_h table td{border-right:1px solid #000; border-bottom:1px solid #000; height:20px; text-align:center}
* Z% t6 K" _6 t    .cc{width:100%; height:220px; border-bottom:1px solid #000; border-right:1px solid #000; background:#fff; overflow:auto;} & H: @* M8 K: W) r, y
    .cc table{width:600px; }
: W. n! B1 J/ }, A/ q9 }% X  t    .cc table td{height:25px; border-bottom:1px solid #000; border-right:1px solid #000; text-align:center} # a/ j! a- ^& N+ M5 w
</style>
% E( u! ]4 ~2 O8 ^# ~% m<script> , j. N; U( C' y
  function aa(){
! C& w8 H1 `' r3 Y0 ?6 U9 a# U     var a=document.getElementById("cc").scrollTop; % j/ R) P4 ^! L3 [
     var b=document.getElementById("cc").scrollLeft;
' d" h% s: q4 `/ q      document.getElementById("dd").scrollTop=a; . m7 |' h8 Y5 }7 M) d
      document.getElementById("hh").scrollLeft=b;
( K# H0 i' d1 ]: k" N) M1 M5 M1 b  }
  D3 v0 E8 X* {/ P+ @</script>
. @' Y2 K8 d, M</head> / r" V! e9 k4 h
* o" V2 M) `/ _1 d% J4 {$ @* y9 @
<body>
2 Q' ?9 k; q* W  _0 e<div class="t_n">
1 P" h! [: y# C$ I    <span>序号</span> ' E; M% W+ _; w0 d
    <div class="dd" id="dd"> ' m- a/ M' P! t1 ?, ]5 J
        <table cellpadding="0" cellspacing="0" border="0" class="t_number">
# d) z3 _  P9 s# H' H            <tbody> % h% T! P: V5 E
                <tr>
/ {- R! m# n% M                <td>1</td> $ o, e3 z6 V, X" u; V4 q. ]
                </tr>
1 |* z; K. v' y# D4 ]9 J                <tr>   e. h5 ~  G* n- u
                <td>2</td>
/ R, v6 x' u. ~% ^1 j3 |                </tr>
1 f  Y  ^8 d( Y' ]                <tr>
; `5 c% v4 A" Q5 [                <td>3</td>
8 ?8 p. v( J5 W& P                </tr>
% ^+ Q4 y! Q3 z% u/ ]# R& b) {                <tr> 6 y* t% v' B' M8 Y' F
                <td>4</td>
* a1 z. _) [: I2 k; t* ]9 X                </tr>
' T1 W/ T, A# a1 c                <tr>
+ d' F0 F: `# |' ?1 W+ i1 t4 O                <td>5</td> % K/ u8 Y& k2 ^$ e% F+ q* T& V
                </tr>
" n- J# m. O" J                <tr> & `; p+ A* ?/ F- I4 w- [5 a
                <td>6</td>
6 K9 J7 d$ B8 k' v7 s                </tr>
" I! e* ^6 f! u! _# C                <tr> % z2 [5 i0 E" @0 F
                <td>7</td>
: n0 W' a: A+ {' T8 H/ N                </tr> ! L' O1 O. y" Y: {( W2 N
                <tr>
9 }+ t7 y! Q; k) L: A: w  y                <td>8</td>
* V( |& s+ m5 b6 e                </tr> * G! r3 L" F4 u  u' @
                <tr>
; S" ~: ?7 u1 P                <td>9</td>
8 W4 d- @3 K3 C                </tr>
! b' R& Z: d" M                <tr>
. a/ M. B# I( X                <td>10</td> 2 R! Z. R' }6 g- v. I: p; K3 ~
                </tr>
! q& Y! a  h& Z" t# B( A: X                <tr>
% p" F7 O! H' _- n. L$ _: j                <td>11</td>
( c' |( b, {! c                </tr> ; a3 v8 p9 @; u- X
                <tr> / O7 n5 e6 J, C$ h" l
                <td>12</td> * Q, z4 a6 a( Q9 B3 w0 g0 X! j
                </tr> % \5 l% n- T* s% W1 w; I  _: M) h
                <tr> . d3 I; h+ r2 c7 I0 W
                <td>13</td> ' m$ q0 I# B  ^5 K. w
                </tr> ) J2 e( H0 ]# J+ m( p
                <tr> 9 {: ~8 [7 v, p9 M- r* C- m
                <td>14</td>
% E' p& D! O8 C                </tr> " n9 V0 p* l1 b4 M8 I7 |; L3 E
                <tr> ; {  ^- b; D# W8 [6 _
                <td>15</td> , {# R- R7 [  [8 A: o; `! Q! B" v
                </tr> 9 o9 m' v# Y2 e5 H8 Y1 Q9 `
                <tr>
0 w7 p5 z6 i- u; `7 N, [6 S                <td>16</td>
# I! j" p% T+ D                </tr>   @/ D, [" l. Q* l
                <tr>
" i9 J9 T5 k3 U4 K, K( M3 b; K* K1 }                <td>17</td> 7 ^" j# Q2 ?% l7 w9 s/ Q9 O6 U9 V! ]
                </tr> - _' A6 q0 ]: f# f8 n0 e( e
                <tr>
# G; I7 c) T4 Y; K6 {: X) X. k! `                <td>18</td>
6 g) b/ s$ \( Z# g                </tr> 2 P/ U2 f' P8 e  I& K9 K; [
                <tr>
& X6 @& I) \2 k                <td>19</td>
. R- @" r. v: X3 [                </tr>
- {; R6 T1 K5 c                <tr>
. m2 w+ L0 l2 W0 ^0 T) x( v                <td>20</td> / p% B" _2 u' Y$ l1 A
                </tr>
" \2 l; I7 M7 F4 X0 t. d            </tbody> ; }, w% }; N, G' w, S
        </table> 1 R7 g5 U/ P8 g  x; A# w! }, Y
    </div>
% F" b7 j* R4 z  u- l4 B" P</div> & O. y4 r- h7 r- c) O; \
<!--table栏目--> 2 x4 l% I. ~" N1 v8 a( N
<div class="t_i">
/ }% g2 g& |, a) {3 b$ f7 R) m    <div class="t_i_h" id="hh">
5 i, u6 [% z8 M9 C9 z        <div class="ee">
( A/ a; q$ C, f2 g9 C            <table cellpadding="0" cellspacing="0" border="0">
8 A5 d6 N, V; x! i0 N# P' V             <tr> . O4 z- }+ ~2 B( E$ z3 b
               <td width="10%">栏目A</td> " R, R5 E9 Q9 N- W0 n. `6 j
               <td width="20%">栏目B</td> 5 U% l; @# t' q1 N
               <td width="10%">栏目C</td> ; A' Z' s$ q' g( l3 s
               <td width="20%">栏目D</td>
; g, ?. c5 M4 J8 B4 H/ p               <td width="20%">栏目E</td>
4 y* ^! B6 g+ R* m- p& n1 h1 ?% t               <td width="20%">栏目F</td> ( n; Y$ g! a  v6 c% e6 ]
             </tr>
3 E5 a  F, Y, h( |            </table>
3 E6 f) p  }$ |2 M" j        </div>
8 f: J) T6 Y" @7 p; }. r+ Q, T    </div>
* X1 b, ?; W  y) m! C$ a4 b    <div class="cc" id="cc" onscroll="aa()">
9 N  n8 N* y, r7 w+ E+ u" N5 }        <table cellpadding="0" cellspacing="0" border="0">
3 f. @" g2 d, k, J4 S! R            <tr>
+ h/ z; U# s" L+ \4 L8 l: N1 Q                <td width="10%">1</td>
/ t7 U5 b# E' P$ _: g4 q, g; w                <td width="20%">1</td>
- d! }" u9 ^' l                <td width="10%">1</td> 1 d- g. P6 x" a
                <td width="20%">1</td> 4 ?# f2 p$ {1 w# p
                <td width="20%">1</td>
0 d* Q, H+ U9 e& {                <td width="20%">1</td>
* W. w, d/ Y2 g6 h" u: `            </tr> ) r* j# I: u0 |; Y
            <tr> " X" w7 p/ \0 K7 U
                <td>2</td> 0 H. L' r' G  @4 ?* g$ d9 n% C4 \
                <td>2</td> ) B+ {' d2 G* m2 d6 m5 O2 ^
                <td>2</td> 9 v+ C  ~/ P( y
                <td>2</td> " a: _* i7 H! _. n
                <td>2</td>
* k3 z0 B9 Z8 ~' X& ?3 G9 \% x                <td>2</td>
# m" {) _# {# x8 m) |' v: s$ }# @            </tr> " ^7 T. S' c" B" N: D* d
            <tr> ) b7 h7 t9 C/ l) ~+ \+ o
                <td>3</td>
! Q6 M, z4 k1 s4 x0 A. t+ o                <td>3</td> 2 U" Z" {, ~; j+ A
                <td>3</td>
: |2 \3 f3 `9 C4 i* D  g6 V: [1 a, \6 ~                <td>3</td>
6 _; ^, S- Q+ n9 h; [9 X2 Z9 o                <td>3</td> ! j: O7 p; [" ]7 L; ]. P6 v
                <td>3</td>
4 E4 p) u3 J" k            </tr>
& D% y% h* R% G+ ]            <tr> 1 J: D; h$ q) q" g4 W- ~/ H
                <td>4</td>
/ V. p: P+ L: u  c2 j% s: ?" M" N+ f                <td>4</td>
7 F3 d: p2 M0 U% T4 {. F. T. @                <td>4</td>
$ Z1 d# h1 h; z! M6 c7 t+ t                <td>4</td>
0 V- @  ]: E" ^) H, G                <td>4</td>
) \5 M  m( ]4 a: }% D3 H. b  {( C                <td>4</td>
* F8 a# @8 T! |% q, G8 T, z0 T4 h            </tr>
, k8 H- d. W% I            <tr>
* d& Z/ z. R5 f2 j( ~/ o, b                <td>5</td> 2 Z) z7 j# K8 t- R! @/ N( K5 [" a
                <td>5</td>
! Q0 [9 y$ H/ W) y6 G. _                <td>5</td> $ e) i4 B3 B* }
                <td>5</td>
, K# O8 k+ Q2 |6 m7 x. Y0 g                <td>5</td>
3 n+ G7 N, v! c. ^                <td>5</td> " }7 U' r3 J2 J- P
            </tr>
7 m! N. r9 _. t            <tr>
$ F2 E& J- V9 n; W                <td>6</td>
1 L5 [( W& R7 P6 M$ t8 p                <td>6</td> ( _( k) o( m- Y4 {
                <td>6</td> 3 r6 O0 I1 X& G( S
                <td>6</td>
* X' S0 m0 d! ]: I  W                <td>6</td> ' I9 f; F1 F( w1 S6 S/ P3 Q: U
                <td>6</td>
9 J+ d* a% k- r$ I" b: j& A- }" f+ I" e            </tr> 2 q0 T9 I8 _9 B
            <tr>
) s9 ]6 Z9 d* ~+ |! y) j5 [                <td>7</td> 4 T9 N; d4 k* z
                <td>7</td>
& q0 W- w8 N. g: L& ^                <td>7</td>
% J4 }  b, S, V& n                <td>7</td>
3 T  @% b$ c2 Q7 i6 r2 J# G                <td>7</td> 3 r: c  ~9 V5 z0 x
                <td>7</td>
' x2 [5 l5 g/ p8 H7 t6 P1 U2 ^; e4 q            </tr> - C( V0 D) c3 j9 y+ u
            <tr>
5 p" X# C( @- g                <td>8</td> 6 F" g, A! G' g7 q0 h) F
                <td>8</td>
& F5 s5 ^  r6 |* W# O                <td>8</td> 9 t! Z9 n$ P1 \; o
                <td>8</td> ( p, T( o. r& L2 {
                <td>8</td>
: v) p3 G% n2 n0 o( z                <td>8</td> 8 E3 o3 n, I& D! D0 |
            </tr>
5 ^* k# C3 M6 Z2 e7 O            <tr> $ L6 Z4 t* n8 k: r  j
                <td>9</td> ! B3 K, D" N; J
                <td>9</td> 2 w' r3 T1 ?3 O5 a
                <td>9</td> : \. W5 t; _) @. Q( M6 k
                <td>9</td>
( q! a$ u! i$ X$ Z' E( M+ i5 h                <td>9</td>
' B. K) {% f0 }1 p6 H  A                <td>9</td> + p' b( i" [  \: m
            </tr> 3 h9 F, G2 N' T$ F3 F
            <tr> ' L. ?4 c' i2 X3 q1 R
                <td>10</td> 7 A  ~" r" V8 r: i  p
                <td>10</td>
* e5 T8 m8 N, G+ y; A4 d                <td>10</td>
; ?2 t, q  Q" j( U5 o: L                <td>10</td> 8 L2 K1 U! Y- E5 D! q/ i( `
                <td>10</td>
/ u! E( W* N, p                <td>10</td>
( N$ m. w; o+ e3 _/ g3 M6 o            </tr>   g+ @4 O) E; D
            <tr> - c& j- w( C: u7 k; z. W$ U0 N
                <td>11</td> 5 \4 b  D& U5 N5 V
                <td>11</td>
" b/ T0 Q! l' p! O                <td>11</td> / z! c! p/ r' i' K. c
                <td>11</td> ' j  G! p$ D* |6 k$ N
                <td>11</td> % _5 \: h1 f' X3 H/ j: q
                <td>11</td> & R# y3 @. X# v: C$ q' z
            </tr> ) L( H, Q" f& ]; ?& h! G) n
            <tr>
; g; Y2 I# S& h- S! N/ H                <td>12</td>
5 T3 X4 |! ~/ x1 C7 D                <td>12</td>
) y( q6 Z6 b/ r6 F                <td>12</td>
( w, v8 P) A% o4 x* D# o- V' I+ X/ u+ y                <td>12</td>
& M  Y7 {. h% d: Z& V/ J: D+ |                <td>12</td>
% v+ n0 C. u; N5 {$ p$ i. u                <td>12</td>
+ l3 O9 ^- V- ?            </tr>
. T7 h1 M7 ?- {( R) h  R& y            <tr>
" j( V, ]) n! T; a                <td>13</td> 5 L) f- o. U: S- M1 Z* B7 A
                <td>13</td>
& l; r/ ^) q# l: t& t% c: U                <td>13</td> 2 t+ D6 O$ k$ s& o
                <td>13</td> - G! ^9 k  h) e3 \: Z; G1 q
                <td>13</td>
/ X9 ^" B* s0 f6 X                <td>13</td> % D) G3 v% {, ^$ F
            </tr>
  j0 ?+ A/ z# w* S. O# w# h9 K            <tr>
4 M3 H' C3 b" N- {# h: @0 h1 H                <td>14</td>
3 \0 ~: L3 H- o9 r7 X# c# r1 X. O                <td>14</td> $ A; ~; m: l! s
                <td>14</td>
2 [7 }3 \5 ^1 ?+ p4 x: X& f# w. Z                <td>14</td> 8 _' u  h" T7 a( ^7 g
                <td>14</td>
* e  a  R# M- q" C6 ^- r                <td>14</td>
# n* z  f# l0 S, N" @( w& B            </tr>
2 W+ z: G9 o7 x. [            <tr>
; v, K0 h7 m" z: h                <td>15</td> ' I0 W, T; `: ^8 }$ z  q' J
                <td>15</td> 3 \* b+ ?) u7 Y* \& ^6 e1 s$ f
                <td>15</td>
* J1 g  K; @  r$ e                <td>15</td>
" @  X& k  ^9 z& W4 P                <td>15</td> + T, R4 u- ^& g7 }
                <td>15</td>
( F; X7 W- P+ c; q' P8 u            </tr> 6 {8 M* }$ \3 ]' _  r
            <tr> 9 H# t3 ]1 b6 U* k8 A$ M) O
                <td>16</td> ' f+ L1 \- R3 v
                <td>16</td> % `2 s, a  o  X9 K0 b8 H/ y
                <td>16</td>
8 _6 e6 F$ l$ B6 ^+ i4 l                <td>16</td>
5 }$ x5 @4 v3 J6 t                <td>16</td> ' K9 u# D3 R6 F* m3 r7 G2 }7 T. W% l
                <td>16</td>
3 ~6 R( ~' L: R8 R* n            </tr>
. R$ b# m( R! @) R            <tr>
- ]( f- u1 Q( E# M* [                <td>17</td>
3 ]* h+ {" l$ u1 D0 o                <td>17</td>   B! [. B5 y* G% S$ x6 l) T$ F% L
                <td>17</td>
8 [# u; c9 O4 ?4 e                <td>17</td>
/ W8 ]+ p# N" \: D6 R                <td>17</td>   \  D5 x- t, q0 l! ]
                <td>17</td>
& [, m( G+ W5 `, n% X9 S            </tr>
( D# N7 I. z* [! F* M: p: Z- w            <tr> 0 |; j3 r& }0 H8 P
                <td>18</td> / K+ X8 p0 l9 o8 |
                <td>18</td> - A$ J& R5 c0 N. Q
                <td>18</td>
" W; i8 P: n1 u# C. q* O/ o                <td>18</td> - a/ j' R, z7 y
                <td>18</td>
& u. H/ N6 Z( b                <td>18</td>
" \8 Q3 X1 {+ J, o/ x            </tr>
! A" a6 T7 @. O* ^* W$ B/ x            <tr> 3 t+ \  q  q8 E, E5 |% t
                <td>19</td>
6 o) v( ^( t1 W6 L" W                <td>19</td> 6 \. W3 E, V9 z7 }) j
                <td>19</td> + ]( K0 B: `  d# O- `1 c: H! j$ Q# N
                <td>19</td> 6 d, S7 h3 O4 E) }5 R/ B
                <td>19</td> ; n5 O9 {3 `7 M) W1 l+ a
                <td>19</td>
9 ^/ u( S( F! h' G" y0 A% Q! C$ A            </tr>
! a* K% B0 t" c6 S! Q0 m9 O            <tr>
: V# @8 A- U1 I( A+ [7 t                <td>20</td>
) `5 j$ M* {  \3 u2 R$ u  v1 s                <td>20</td>
. I/ I6 t2 p* r/ n8 S6 r                <td>20</td>
5 i* `2 b3 m7 t4 c# |$ E                <td>20</td> ) V' J# E, |  n9 J
                <td>20</td> / N# R$ L( v# n8 p; |3 S
                <td>20</td>
: N% k, \& K# ?) ^5 A; \            </tr>
% V9 U( G% T3 Y  l% b/ f" I4 q        </table>
2 F5 v$ |6 g2 b# _    </div> ; a- _. h. h% m9 u6 z
</div>
7 L9 `0 Z; E# W. y9 _
作者: Star    时间: 2010-8-13 12:35
给点注释什么的嘛:P



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