| Autor | Zpráva | ||
|---|---|---|---|
| termi Profil |
#1 · Zasláno: 3. 12. 2011, 21:10:09 · Upravil/a: termi
Ahojte,
poprosil by som o radu, chcel by som co najjednoduchsie spravit html tabulku, kde by prvy (pripadne niekolko prvych stlpcov) bolo fixed (teda pri horizontalnom scrollovani budu stale viditelne, a "nezmiznu" vlavo. bolo by dobre ak by to bolo riesenie iba HTML+CSS (teda nech nepotrebujem nejaku javascript kniznicu) a ak by sa dalo, nech to nie je tabulka v tabulke (samozrejme ak sa to da), dobre by bolo ak by to fungovalo vo vsetkych aktualne pouzivanych prehliadacoch. vygoogli som vela riesenie, ale kazde co som nasiel malo nejaku chybku. nasiel som nasledovne riesenie, ktore funguje vo vsetkych prehliadacoch, len v IE 7 nie, kde nefunguje asi "top:auto" v headcol, pretoze prvy stlpec vo vsetky riadkoch nauklada do prveho stlpca prveho riadku na seba. dakujem za akukolvek pomoc. Ivan <div class="pre"><pre> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head><title>testdoc</title> <style type="text/css"> td { margin:0; } div { width: 600px; overflow-x:scroll; margin-left:5em; overflow-y:visible; } .headcol { position:absolute; width:5em; left:0; top:auto; } .headcol:before { content: 'Row '; } </style> </head> <body> <div> <table border="1"> <tr><td class="headcol">1</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td></tr> <tr><td class="headcol">2</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td></tr> <tr><td class="headcol">3</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td></tr> <tr><td class="headcol">4</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td></tr> <tr><td class="headcol">5</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td></tr> <tr><td class="headcol">6</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td></tr> <tr><td class="headcol">7</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td></tr> <tr><td class="headcol">8</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td></tr> <tr><td class="headcol">9</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td></tr> <tr><td class="headcol">10</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td></tr> <tr><td class="headcol">11</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td></tr> <tr><td class="headcol">12</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td><td>...text...</td></tr> </table> </div> </body> </html> |
||
|
Časová prodleva: 8 dní
|
|||
| Novy Profil |
#2 · Zasláno: 11. 12. 2011, 20:10:27
Těm sloupcům dej třídu a
.sloupce{
position: fixed;
top: 200px;
left: 100px;
} |
||
|
Časová prodleva: 12 let
|
|||
0