Stały nagłówek tabeli [html]

0

Witam, mógłby ktoś powiedzieć jak zrobić stały nagłówek tabeli. Czyli "nieprzewijalny", tak żeby ciągle było widać nazwy kolumn. Próbowałem position:fixed, ale coś mi nie wychodzi. Niżej daję kod tabeli. Proszę o pomoc.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>WM 4.2014</title>
  <style type="text/css">
  code{white-space:pre; margin-left:50px}
  samp{border-left:5px; display:block}
  tr, td, thead {border: none; background: #EEEEEE;}
  .sort{background: #0033CC; color: #FFFFFF; text-align: center;}
  .sort:after{content: ' ↑↓ '; font-size: 20px;} 
  </style>
<script type="text/javascript">
function cmp(a, b){
    return a>b;
}
onl=(window.onload||new Function);
onload=function(){
    onl();
    for(var i=0, e, tds=document.getElementsByTagName('td'); td=tds[i]; i++){
        if(/\s?sort\s?/.test(td.className)){
            td.n=i;
            td.onclick=function(){sort(this.n,this);}
        }
    }
}
function sort(v,d){
    d.o=d.o>0?-1:1;
    var tbody=d.parentNode.parentNode.parentNode.getElementsByTagName('tbody')[0];
    for(var i=0, c=[], tr, trs=tbody.getElementsByTagName('tr'); tr=trs[i]; i++){c[i]=tr} // just make an array from trs
    c.sort(function(a,b){return cmp(a.getElementsByTagName('td')[v].firstChild.data,b.getElementsByTagName('td')[v].firstChild.data)>0?d.o:-d.o});
    for(var i=0; i<c.length; i++){
        tbody.appendChild(c[i]);
    }
}
  </script>
</head>
<body>

<samp>
  <table id="s" style="width: 120%;" border="1" cellpadding="6" cellspacing="6">
  <thead>
   <tr style="cursor: pointer;"><td class="sort">Tytuł</td><td class="sort">Kompozytor</td><td class="sort">Wykonawca</td><td class="sort">Gatunek</td><td class="sort">Typ</td><td class="sort">Skład</td><td class="sort">Opracowanie</td><td class="sort">Region</td><td class="sort">Źródło inspiracji</td><td class="sort">Źródło nagrania 1</td><td class="sort">Źródło nagrania 2</td></tr><tr><td >Michał Urbaniak festiwal Wszystkie Mazurki Świata </td><td >Michał Urbaniak</td><td >Michał Urbaniak - skrzypce</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td><td >Mazury polskie</td><td >http://www.youtube.com/watch?v=U3dk-o5e2Ko</td><td >Nagranie z koncertu festiwalu Wszystkie Mazurki Świata z 2010 roku </td></tr>
      </tbody>
  </table>
</samp>
</body>
</html>
0

https://www.google.pl/search?[...]hannel=suggest&gws_rd=ssl

ale:

takie rozwiązanie ma dużo pułapek, jeżeli będziesz chciał mieć bardziej skomplikowaną tabelę (colspany), bądź chcesz jej zawartość dynamicznie odświeżać - każdy plugin/skrypt/rozwiązanie na czymś się wyłoży

1

Proponuje rozwiązanie bez js. thead i tbody do display: block, ustawiasz wysokość tbody i overflow-y na scroll. Minus jest taki, że musisz ustawić szerokość komórek, ale to możesz automatycznie js'em zrobić.

http://jsfiddle.net/jd70wma6/1/ przykładowe rozwiązanie problemu.
Pozdrawiam.

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0