|
|
p' x; N- s- `) G; E- U7 s
Table标签的固定 表头和行头 可以在有限的页面中显示超过页面长和宽的多行多列内容。废话不多说，直接上例子：
3 E8 \2 `# x" T& C$ I6 p
1 M$ x7 J, u# K' b<head>
' r1 Y0 J$ P1 x6 F<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> ) P5 b4 ^4 M1 v) ?
<title>无标题文档</title>
$ }' {1 T3 X; [5 x" ^$ |5 F9 I8 U8 H<style>
- U6 i+ Q8 v/ s0 `1 u# J body{font-size:12px;} - l6 `; [1 C, A3 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 a4 Q6 v W' Z* F
.t_n span{display:block; text-align:center; line-height:20px; border:1px solid #000; width:28px; height:20px} ( _, h# A9 c9 p1 h6 g
.t_number{border-right:1px solid #000; width:100%; margin-bottom:5px}
, ~( w' g0 C4 p9 p/ z! N .t_number td{border-bottom:1px solid #000; width:30px; height:25px; text-align:center} ' u6 y, z* y8 V7 @: _6 j
.dd{height:200px!important; height:208px; overflow-y:hidden;}
) d" g: `5 T/ g% K0 g" ]* Q2 {, |: i( c M" o
.t_i{width:400px; height:auto; float:left; border-right:1px solid #000; border-top:1px solid #000} ; m9 t" J ?2 F( B+ _2 Z
.t_i_h{width:100%; overflow-x:hidden; background:buttonface;}
/ i; H! B) a- V6 B a( E .ee{width:618px!important; width:620px}
, z% f. {: C% D* k/ w9 Q .t_i_h table{width:600px;} 7 K( K9 `. o3 [# C' S$ W
.t_i_h table td{border-right:1px solid #000; border-bottom:1px solid #000; height:20px; text-align:center}
) @4 j4 S1 [5 R) h$ { .cc{width:100%; height:220px; border-bottom:1px solid #000; border-right:1px solid #000; background:#fff; overflow:auto;} : o g F. ~% q7 u$ N; n# O
.cc table{width:600px; }
7 s& x5 ~6 t8 Z: M6 O( M .cc table td{height:25px; border-bottom:1px solid #000; border-right:1px solid #000; text-align:center} # A2 C2 P+ e6 y4 \9 s$ l0 E
</style> 2 E* _' y; l$ \! v3 j( A$ |6 J. N
<script> ( y# `) J( V9 B+ }5 E9 ~) L
function aa(){ ( q8 v' h) H8 j1 I
var a=document.getElementById("cc").scrollTop; 3 f( K& |7 k c5 c
var b=document.getElementById("cc").scrollLeft; 4 e) V d6 @) T1 B! g4 W
document.getElementById("dd").scrollTop=a; ) i6 u) }( L2 `
document.getElementById("hh").scrollLeft=b;
& ^$ t# X# B+ P" l( h0 u: i4 K% N }
# M1 _6 D( g3 @2 ^* F$ |5 |</script>
9 h% V# s' w3 S2 a: F3 Q</head> - { _- L5 \, R4 n; F8 b- ]
1 a9 H7 r; _0 m' ~! T
<body>
' S0 D( O/ [' _2 t; v' C<div class="t_n">
$ G9 X+ a1 u3 T1 G. W! U- o <span>序号</span> * h4 O6 |( a* C7 P6 d; d* b* s
<div class="dd" id="dd"> ( X! U0 J4 r6 d$ M7 O6 T% Y
<table cellpadding="0" cellspacing="0" border="0" class="t_number"> q" q' B/ Y, L
<tbody> 6 T2 L5 v; t9 x# {
<tr> 6 s9 q; p8 D$ s, E6 F q
<td>1</td> # ~ P% m' @( n. y: H
</tr>
- n8 j( |3 _ q! o; \ <tr>
2 P3 F, @- n0 v <td>2</td> 2 S0 o# t4 `+ m, m! C
</tr>
" y' x6 R/ n4 o2 c3 l, }$ J2 V <tr>
6 v1 K: }1 f A0 Y6 V <td>3</td>
% R Q' H, _5 O8 _8 d( Y </tr> : c0 L$ e) A! y
<tr> ( Q* x/ I. G n/ ~8 j
<td>4</td>
r* c8 ?4 j, h </tr>
' w6 q. P! f7 W3 J0 S <tr>
2 F$ m$ X; w @# Q" @: T4 n <td>5</td>
# T2 I1 R$ V ^: o </tr> # l6 F; f( O9 q
<tr>
" J- D; V1 p8 x; K. h <td>6</td>
~# K7 [/ E U# }" C </tr>
2 _1 t" T4 j$ t$ ]6 D9 t. [ <tr> & h1 B0 p; i+ R- j
<td>7</td>
9 i. q5 ^( i5 S" W+ C: r6 v </tr> ( [7 [9 k8 o8 y2 t. f
<tr>
7 Q" t* A: g, ^4 I- o. _ <td>8</td>
" e8 b9 L _' b ~ </tr>
' { B8 p9 c1 L6 o1 h0 c4 W <tr> , M+ z( U( h$ X
<td>9</td> % [0 ]1 K% V+ \+ p
</tr> # {. j) N2 U5 }5 e5 _. w. J8 \
<tr>
: F# H, ]% F. o <td>10</td> 1 ^! ~. u/ Q0 r+ K
</tr> ' B( }3 _( ^# d6 a) S( K8 n
<tr> 6 L+ K/ `; Y% g
<td>11</td> ( D3 v a' | z2 |* ~4 S5 g& [
</tr> 4 q% X4 R$ P% C) s! A8 ~
<tr>
% H, N' B2 {8 C8 u <td>12</td>
$ L9 s! P, p; v( ~8 G( @ </tr> 4 n1 v2 O' P) k& G
<tr> ' \4 w8 l/ d" f/ e' @2 a; |
<td>13</td> ( B/ r8 ~0 w0 t! r* J
</tr> $ o0 ]; @0 r# n7 _. h" W% a
<tr> 0 m# B2 u8 } L1 Q- [* {
<td>14</td>
0 H; f |' X9 [ t& ? </tr> - c8 ]' Z9 H2 {- s7 ?
<tr>
% k1 ~2 [' \) e% g <td>15</td>
/ n6 B& a1 s2 E, \5 X# d* R) B </tr> 0 Z! q( N4 {1 O+ V* S, G
<tr> 1 [+ J l3 J* v3 x$ x
<td>16</td> ( ]0 B, D8 G$ _- G5 @- w
</tr>
: d& N& f+ E; G, V$ L5 |. e9 K <tr> . C9 `3 `. F' n, O, J' o
<td>17</td>
- a4 E5 M" f0 ~) R* l" k </tr> ( V7 O6 |* X: o! j. j
<tr>
3 }- c7 C1 R9 {8 b <td>18</td>
" F, N6 m6 [( U8 }! y) L) k </tr>
! I3 l6 L3 r; d <tr>
1 {- H+ G0 D6 p <td>19</td>
3 j$ B5 A- p+ b/ N </tr> 0 O! e7 {1 e4 m4 K& `* n
<tr>
6 t' W5 f; L+ u <td>20</td> 6 O9 M! I9 }6 _- T$ r$ N( J
</tr>
7 O" J) }7 S- @0 Y5 U3 g </tbody>
5 ?) A H3 _. d3 c W </table> 5 Q( B0 U5 \: F! u) H) k. m- m
</div>
+ k7 k: g, ?$ z" }</div>
6 @$ d5 C; k& \) N& f* n5 Q6 c<!--table栏目-->
' s4 ~7 |* d m" l7 A: Z3 D<div class="t_i"> : i2 [# V, v2 t4 g
<div class="t_i_h" id="hh">
$ U( L% N) j; u( |3 Q, |0 A- T- y; x" Q, T <div class="ee">
' c8 |( a7 c6 ~ <table cellpadding="0" cellspacing="0" border="0"> ( K! O7 W2 k$ c4 }) M5 O* E
<tr> % \ q+ T2 \9 i7 C
<td width="10%">栏目A</td>
+ a( y7 v5 [# C8 B M- E; F <td width="20%">栏目B</td> 7 `! P" @# r) m. j- A9 W% w
<td width="10%">栏目C</td> 0 B R. r! e) ~/ R
<td width="20%">栏目D</td>
7 p# I& z! W- P: j, W! B9 H! M <td width="20%">栏目E</td>
' h+ v4 w+ R! p3 k# _) z7 ]! t9 Z$ {1 J <td width="20%">栏目F</td> 3 u/ v) H O$ u9 I8 k' v8 P
</tr> " P$ U" K3 H, z. N& |
</table> 1 Q% l: m- F( `0 J3 p1 x/ { f
</div>
1 a$ v' ^8 Q4 e e. l </div>
+ X/ } ]1 l2 c0 C$ S$ Q- T <div class="cc" id="cc" onscroll="aa()"> ( y3 ^5 l' c+ E2 P& m5 d2 [* |# x
<table cellpadding="0" cellspacing="0" border="0">
' |2 P3 D1 g5 a& |& k+ Q+ L <tr> 2 k9 @* W# w9 W1 G5 m" L6 L3 t6 W R
<td width="10%">1</td> 5 R; v) h) I% V# k
<td width="20%">1</td>
3 U% Z- `) s: M e6 E. g3 w <td width="10%">1</td>
$ L/ b+ C& A' j! A7 D <td width="20%">1</td> 7 ?$ E" Z8 A: c7 c E) A" }- G
<td width="20%">1</td> 7 ~& \! E6 ?9 J5 \* U: }
<td width="20%">1</td> 6 [7 r6 d8 H' ~* `4 n
</tr>
+ l5 ^- Q3 U7 W g <tr> . N# j& W) ~7 q0 O
<td>2</td>
& q6 j P: B o$ d5 K- C <td>2</td> * w W& ~5 \3 `
<td>2</td> " }' }5 R }9 G5 h
<td>2</td>
/ [0 @* s. S& A" [- q <td>2</td> 3 v7 r; \1 c R' s' }
<td>2</td> * k+ D, g4 y/ ^0 w) y1 g9 n
</tr>
6 j, w9 N5 L1 @ <tr>
, D- i' K; m( H& ^/ l <td>3</td> 5 o; z x7 X- J
<td>3</td> ' F) \3 k, ~! K2 D
<td>3</td> / Z% _1 ~# V% `- c
<td>3</td>
; m# M# C7 |8 D0 n2 V( d! H+ N' f <td>3</td>
1 l. W2 }) ^+ j% f <td>3</td> ) F: z& s3 [! ^' E3 j% K* o; D0 J
</tr>
' o) ?7 N' D- p0 y <tr> * ~0 w1 W6 ]" d; g' L+ j- F
<td>4</td>
2 w0 }2 r1 Y8 Z7 @. P <td>4</td>
& J( \& O' `' K$ S. J <td>4</td> # E4 h) ~; y4 G$ R* c6 ~. |8 z
<td>4</td> % b# O H3 V$ l3 I
<td>4</td>
+ F0 M9 y" b/ u% A8 e( ^ <td>4</td> : a- ?2 c8 Z( _1 ~- I4 ~' T. T# Q
</tr> - g3 C* w6 L3 i3 c
<tr>
! z2 L5 }, W3 L; W <td>5</td> 4 _; T- N& A: y9 T" i% F
<td>5</td> 9 h) R1 h" \% D8 S
<td>5</td> ; u+ K8 Y# j s* s& |
<td>5</td>
, x6 x+ K; h9 s& m6 }" [, {& A <td>5</td>
" w& ?- Z, i( ?8 b <td>5</td>
5 ~# C$ {% A w" p/ B% s </tr>
' j3 N- W. ]" c- l' h @ <tr>
- \# q4 @& L; U# a3 h4 R( h <td>6</td> , \; j5 x8 p- i2 x) \
<td>6</td> ' b; V1 l* r/ H( c2 c, `# h/ Q
<td>6</td> . t: W/ Y l9 o
<td>6</td> : j, i4 a9 w! {/ z. o/ M2 J8 ?
<td>6</td>
* m2 g& c4 I+ A$ Z$ |1 m0 | <td>6</td>
/ _* N" Y1 Y( n7 W$ x1 b9 H </tr> 2 u, `# q' v& l( {
<tr> 5 A2 D- ~( P# C# ?
<td>7</td>
! L+ X! C' B" m4 Z# D6 K <td>7</td>
* }) t% j( L4 F- D1 [+ ^' W <td>7</td> 4 `9 b8 W( H4 i0 d( l0 E) d) H" b0 J* P
<td>7</td> : D6 m B. q& t. C6 p8 N( _
<td>7</td> $ |7 Q3 K2 @# m4 q
<td>7</td> ; g' Q5 f% N- M" S
</tr> X9 L" G8 B1 W4 j+ U3 M. t
<tr>
% N+ m. q8 S7 }- r <td>8</td>
' l! s1 |" f3 j* z7 l' V( ^ <td>8</td>
6 a+ i! h6 r- U <td>8</td> 8 X; A9 K- q$ n8 i% Z- V
<td>8</td>
* x0 y) h/ c$ [# v; {1 [9 E# @) B <td>8</td> 8 Y7 Z0 p* Z1 M2 P
<td>8</td> / q" T" s6 J3 M) r. w
</tr> " M4 S4 J- X6 V/ @8 i4 _: n- ~/ y
<tr> ' \8 N9 g5 c8 u) c' |7 Y
<td>9</td> ! E H8 N4 v; `7 E7 \) l
<td>9</td> , |" C% \0 F) Z9 e. R; \! q- J
<td>9</td>
+ A) d; q( j6 q$ z4 z <td>9</td>
5 H% u/ J/ I- d+ [# F% e c2 d2 d1 U+ k <td>9</td>
+ _7 g' s4 s. P3 I) }2 [( F; a <td>9</td>
, x3 X3 T* ]! J& l2 Y1 J. S+ |7 M7 e </tr>
% j( K) R( q q; Y A& c <tr>
# c/ h! d% A: y( ] <td>10</td>
; J8 T& _# H+ _! a, A( O* U6 @$ k <td>10</td>
/ ^6 B. r! b( f5 _ <td>10</td> 7 _! h. ^% w& |. j; F+ L3 Y
<td>10</td> " x/ Z" @' u% O8 ?
<td>10</td>
1 k {$ f2 _. M, [ <td>10</td> * \3 W% E0 p1 }1 f1 @" L1 l
</tr>
0 J8 \( g7 @$ S9 j" Z% Z <tr>
5 v) u" u8 j/ o2 N! g <td>11</td>
$ {+ h" f- o* Z+ C% X/ Z9 ] <td>11</td> . E, y- H6 U# U$ B0 }, b
<td>11</td> 1 r/ s/ A( }$ a+ g6 W! K% E
<td>11</td>
. {. f# {) c) u% j <td>11</td> / E% b0 Z9 @4 j: F
<td>11</td> ; _# q1 ~; u+ m2 |! c [
</tr>
7 K7 O2 g9 r' ]/ ?( L% ]7 F( i <tr>
) s# S) A) k/ S" y <td>12</td> - |1 O" o4 h+ y
<td>12</td> 4 K2 W" _( q+ F9 t
<td>12</td>
+ s ?, J! }- {2 O5 z f' V <td>12</td>
- V9 ~" p# Q, b/ A <td>12</td> ( X, H- M5 o5 ]
<td>12</td>
8 X; J _: `8 v8 |: S# `0 x </tr>
2 D0 c5 w/ Y5 h% \" N+ p T- R <tr> ; P( ^) b& r, ~8 E
<td>13</td>
8 v* p6 Y/ Y5 _: W$ V2 n9 ~ <td>13</td>
* A5 u" c+ u+ E/ j7 p2 J4 p9 G <td>13</td> ! q, d5 T, n7 b
<td>13</td> % D" w0 f. ]& ^& q9 _; _) h
<td>13</td> / p8 Q: o0 q& X+ Q P1 n
<td>13</td> 3 Z% l9 ^/ ]. m6 V
</tr> " j, n7 J* L6 q( B
<tr>
7 k- n& s' k( ?/ { ` <td>14</td> & T( F+ J x8 U' }8 x
<td>14</td> 9 l4 P# P# U' G$ |* G
<td>14</td> @& o+ P+ F4 D. ~* q) p
<td>14</td>
4 b0 W* [/ P3 ?% E! q) o <td>14</td>
4 a9 W5 g; n p( N$ R <td>14</td>
7 S" C; o. _. G' K7 s </tr>
1 r9 ]$ }" B; S. U8 ^ <tr>
4 q( f2 k4 O& |- _ <td>15</td> . E9 l: w. `- j+ y% x G
<td>15</td> 3 V* y% V8 o0 D0 m, |) M
<td>15</td>
2 K+ j0 F5 v7 Z1 ?1 H" N5 g <td>15</td> z: F3 F( D8 \
<td>15</td> - P' ?8 C3 ^7 @8 a ?6 v8 _* H
<td>15</td> : {' @" y: w! z1 m- N8 Y
</tr> 8 L9 Y( n7 K) E2 o5 W5 ~
<tr>
. X" j" y! H" C- a <td>16</td> ) \9 P. ~/ {6 k
<td>16</td>
6 M# p% `, o+ h <td>16</td> " ^# }2 J o, Z- S8 m/ i3 t
<td>16</td> / M4 G) Q' Y" a; h# z- W8 r
<td>16</td> 0 s' l; o( _, m8 ~) u( U
<td>16</td>
3 C, Z0 ]" Y \9 ]2 z" M) l! } </tr> 0 a( V n8 }* X4 d9 ^
<tr>
- p. Z. t1 o( I. n <td>17</td>
' _) s1 d. t" a* p <td>17</td>
. S) n* \( v8 y3 |$ C6 J R <td>17</td>
$ H# \. N, Q! }# Z; v1 v <td>17</td> 4 y+ L6 B8 T( ]
<td>17</td> 9 v; ^. S6 ?8 V
<td>17</td>
4 F" F: F8 V( ~; F H( @ </tr> 1 M2 d: U7 O& \9 a( S! `* L
<tr>
4 V) j& L9 E) c. j6 K- w <td>18</td> 5 x7 z: Q9 C3 {( i5 ], s) z" z6 M
<td>18</td>
- F/ a2 l+ ?6 G% q8 l. P/ [ <td>18</td>
4 L) y% ]0 @" M2 s* {4 G' ^ <td>18</td> $ }5 W9 `$ Y' A9 Z9 g
<td>18</td> ! w ~0 U# ?, g l
<td>18</td>
) e! e8 Q9 h% t6 R; [0 e </tr> & `- `$ h! Y) X+ }
<tr> ) S5 x3 f6 e1 Q, {' ~, b& J
<td>19</td>
1 B R: V' O+ o }3 f4 L$ a <td>19</td>
. a/ r# |; ?$ }0 g1 K <td>19</td>
& @6 r' n# a2 |' o+ g <td>19</td> 2 }3 e" \$ X. Y) X4 G
<td>19</td>
% J; G* K, e& c" M4 N <td>19</td>
4 v4 V j/ S& H: B" {4 m </tr>
: Q0 A8 m H p+ O* X+ |" _: K: J <tr>
% i9 G& w( V9 j' X5 _( v: f$ i <td>20</td> , M) b! P8 |: @
<td>20</td> ! Q$ { v# C' B
<td>20</td> 2 H8 s8 G! O5 K2 x* n0 r
<td>20</td>
; P D; L: i/ C$ @% u. V <td>20</td> 4 J4 b. X* `! w9 T0 h( I$ A
<td>20</td> 6 I3 v' c0 {- ^/ A. ]
</tr> " P# M) l6 T p$ J
</table>
6 u6 `$ Q& F% C8 `5 U# g# x& X; h1 | </div>
: Z$ X' r. W o9 D7 _ i</div> 3 r" ^& G; H4 U, l; W; Y2 ~
|
|
发表于 2010-8-3 09:17:22
收藏
支持
反对
发表于 2010-8-13 12:35:07