Scrollende Tabelle[IE|M|O]

von: Werner Zenk

Manchmal sind Tabellen richtig lang, der Blick auf einen
bestimmten Teil der Tabelle fällt schwer, vor allem dann
wenn die Spaltenüberschrift nach oben verschwindet!

In diesem Beispiel wird eine Tabelle in einen DIV-Container
eingefügt, dabei muss die Höhenangabe des Containers kleiner
als der Inhalt der Tabelle sein.

Beispiel:

 Nr                Transfer                 Stromkosten         Zwischensumme

1	5208	192	12338
2	43960	15372	5066
3	10210	2863	17559
4	51307	47827	15551
5	23683	40394	3804
6	20794	29940	24255
7	56575	20773	28059
8	53477	29095	17952
9	56102	35791	36351
10	41792	48994	30799
11	6618	32320	9423
12	21941	12494	50397
13	48965	38311	45721
14	13540	3515	1951
15	13771	4016	53440
16	13020	26812	41811
17	33091	29573	20678
18	12424	10739	54382
19	6002	17713	35407
20	25126	53626	47871
21	12484	26497	18565
22	18514	32261	12936
23	8099	20743	42343
24	13811	54032	21696
25	24708	53630	50083
26	22070	17602	39543
27	50042	30357	45328
28	25633	8426	5094
29	47752	261	13169
30	34447	13390	47909
31	5005	46056	7865
32	28558	42801	24069
33	6867	17769	41125
34	19294	15507	27092
35	19724	11517	1270
36	41056	39631	2528
37	54750	44752	21088
38	9747	35539	49511
39	35842	31822	44806
40	55993	5470	21903
41	39351	36653	5610
42	39824	20154	14793
43	15829	16149	51306
44	2683	22489	44468
45	51060	1767	42376
46	33084	16286	41003
47	22765	32057	2064
48	12990	9858	31218
49	55978	374	51006
50	7178	13412	26182
51	3459	23689	46665
52	49908	2442	8874
53	17957	9871	15919
54	30396	18315	13639
55	33245	49410	25914
56	44625	11057	47934
57	22214	30964	25945
58	52393	54930	37112
59	52234	42845	19477
60	37076	42985	33107
61	19123	29515	45119
62	19414	32535	11954
63	17085	24520	22383
64	34991	56712	55291
65	7744	9164	50856
66	7179	4798	34144
67	23922	7066	14126
68	43620	10063	27359
69	3165	1428	31246
70	9998	37420	1841
71	9394	32976	51949
72	11402	19693	35144
73	7047	40992	27004
74	46502	43192	40436
75	21618	24000	2907
76	14544	30222	44625
77	14798	39164	35127
78	19569	24391	46116
79	42532	55424	51457
80	4915	26232	162
81	7155	28020	4804
82	26048	18769	26695
83	16054	25992	29219
84	3118	13095	3557
85	36971	39461	57
86	14765	40635	12405
87	42450	13220	17441
88	4188	27322	39140
89	1897	16470	14029
90	41157	18640	14073
91	42862	27613	54021
92	12084	18522	18848
93	51199	42108	36538
94	26557	41450	4103
95	8642	592	47940
96	8291	28090	55278
97	533	8912	16386
98	56157	47295	40328
99	40088	45652	20612
100	43736	6669	53671
101	27553	33844	8280
102	30007	28525	6400
103	56473	51925	52877
104	50366	10129	21793
105	4184	36307	16426
106	12546	17077	37506
107	40465	21625	6491
108	17960	23321	9678
109	22402	41412	36939
110	10166	46206	22871
111	28111	51907	16887
112	8929	16697	2806
113	51863	10400	48284
114	23298	46996	49989
115	11512	17392	35526
116	54578	2036	44268
117	41129	35582	25846
118	27766	23722	12686
119	15969	19778	30095
120	5665	15376	42099
121	39431	53832	38296
122	19421	48910	4465
123	5186	36362	45733
124	26616	31310	49180
125	16407	6894	7829
126	47912	16881	5436
127	12797	12096	16708
128	41305	45111	23933
129	16880	21799	24174
130	45829	47406	33592
131	12338	55054	18869
132	2880	34029	34682
133	54817	21707	21727
134	47672	13020	1762
135	5274	44110	15618
136	42729	16663	53910
137	46852	20686	3793
138	25169	14158	54542
139	29015	39500	31760
140	37381	12472	16319
141	47558	36695	42718
142	14496	16785	37162
143	53573	25041	2315
144	43213	29233	20316
145	21933	15964	26234
146	43606	18258	36658
147	8452	56066	50603
148	13029	34954	21909
149	50430	35328	50896
150	44880	39321	27985
151	37145	30175	11831
152	51993	11126	603
153	27927	4556	25907
154	27996	19432	8447
155	50434	8208	35806
156	2559	48168	21118
157	48855	45206	4012
158	40404	40761	18303
159	23614	1311	37858
160	55376	45377	16452
161	53129	30117	6291
162	44484	19579	34508
163	55898	43334	1950
164	5911	11672	9802
165	45797	36475	38916
166	7281	4749	39039
167	47128	34302	52389
168	28292	26350	40351
169	34819	28317	32486
170	42233	8450	16918
171	42345	9727	30751
172	30727	34514	38338
173	27539	49016	27430
174	50328	44081	29790
175	50019	48320	1583
176	31167	29238	12292
177	24116	43462	38243
178	26329	34416	1209
179	27647	21673	36927
180	11469	21920	49537
181	45948	38812	24588
182	24481	56623	51435
183	15266	17415	17443
184	40355	45681	38481

Quelltext:

<pre style="margin: 0px; font-weight: bold;">
 Nr                Transfer                Stromkosten          Zwischensumme
</pre>

<div style="height: 150px; overflow: auto; overflow-x: hidden;">

<table border="1" width="450">
<tr>
<td>1</td>
<td>29</td>
<td>19422</td>
<td>6728</td>
</tr>
<tr>
<td>2</td>
<td>3105</td>
<td>15340</td>
<td>21994</td>
</tr>
...Weiterer Tabelleninhalt! ...
</table>

</div>

• Ein weiteres Beispiel, hier sind zwei Tabellen ineinander verschachtelt.

Produkt

Nummer

aaa	111
bbb	222
ccc	333
ddd	444
eee	555
fff	666
ggg	777
hhh	888
iii	999
jjj	000
aaa	111
bbb	222
ccc	333
ddd	444
eee	555
fff	666
ggg	777
hhh	888
iii	999
jjj	000
aaa	111
bbb	222
ccc	333
ddd	444
eee	555
fff	666
ggg	777
hhh	888
iii	999
jjj	000

Quelltext:

<table style="width:520px;" cellPadding="0" cellSpacing="0">
  <tr style="background: #EDEDED;">
   <th width="49%">Produkt</th>
   <th>Nummer</th>
  </tr>
  <tr>
   <td colspan="2">
    <div style="overflow: scroll; height: 150px;">
     <table style="width:500px;" cellPadding="3" cellSpacing="1" border="1">
       <tr>
        <td width="50%">aaa</td>
        <td>111</td>
       </tr>
       <tr>
        <td>bbb</td>
        <td>222</td>
       </tr>
       <tr>
        <td>ccc</td>
        <td>333</td>
       </tr>
       <tr>
        <td>ddd</td>
        <td>444</td>
       </tr>
       <tr>
        <td>eee</td>
        <td>555</td>
       </tr>
       <tr>
        <td>fff</td>
        <td>666</td>
       </tr>
       <tr>
        <td>ggg</td>
        <td>777</td>
       </tr>
       <tr>
        <td>hhh</td>
        <td>888</td>
       </tr>
       <tr>
        <td>iii</td>
        <td>999</td>
       </tr>
       <tr>
        <td>jjj</td>
        <td>000</td>
       </tr>
     </table>
    </div>
   </td>
 </tr>
</table>

Und Ihre Meinung? Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?

Kommentare: 7 » aufmachen oi:-:monkey: Das ist echt mal was nützliches. Wäre ich so gar nicht drauf gekommen. Find ich echt klasse, vor allem, weil ich das echt gut gebrauchen kann. lg targa850: Super und vielen Dank, nach so etwas nützlichem habe ich schan lange gesucht errorfranz: das mein lieber ist der wahnsinn einfach genial besten dank Uli: "Sehr nützlich! Klappt übrigens auch in Safari (Mac). Kleiner Schönheitsfehler ist, dass der vertikale Scrollbalken hier einen horizontalen hervorruft (der merkwürdigerweise bei vergrößernden Zoomfaktoren verschwindet)." Werner: Vielleicht, lässt sich der horizontale Scrollbalken mit "overflow-y:hidden" ausschalten! Petra: Feine Sache - für barriere freie Tabellen müssten dann die Überschriften (samt id usw.) vermutlich nochmal blind in die Tabelle rein. Jürgen: Die Tabelle ist spuppi, ohen frage. aber leider funktioniert sie bei mir nicht. woran kann es liegen. Werner: Entweder muss der Tabelleninhalt vergrößert werden oder die Höhenangabe z.B.: "height: 150px;" verringert werden. Ingo: Hallöchen, finde diese Arte des fixierens einfach klasse. Nur: wie bekomme ich den Scrollbalken näher zur Tabelle? Bei mir im FF ist der ganz rechts am Rand Gruß Ingo Werner: Einfach die Breite des DIV-Tags kleiner machen.
Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!