Fixní hlavička tabulky

Občas mi metodik aplikace, nedává moc na výběr a představuje
 si, že pomocí HTML
 a CSS dokážu cokoliv.
 Jedním s častých požadavků při zobrazení tabulkových dat, je možnost 
 rolovat obsahem a při tom vidět neustále hlavičku tabulky.

Ondrej Ivanič nastínil velice pěkné řešení v starším článku(4.6.2003)
 Rozsiahle tabuľky a CSS.
 Moje řešení nebylo sice tak elegantní, ale pro danou potřebu stačilo a nebylo třeba používat klientské
 skriptování.

Nástin alternativního řešení

HTML kod:

 
  <table >
   <tr>
     <th>head1</th>
     <th>head2</th>
     <th>head3</th>
   </tr>
   <tr>
     <td colspan="3">
	<div id="scroll-area">
          <table >
		<tr>
     		  <td>some value</td>
                  <td>some value</td>
                  <td>some value</td>
                </tr>
		<tr>
     		  <td>some value</td>
                  <td>some value</td>
                  <td>some value</td>
                </tr>              
          </table>
	</div>
     </td>
   </tr>
  </table>	

CSS kod:

#scroll-area{
      overflow:scroll;
      float:left;
      height:50px;      			 
      margin:0px 0px 0px 0px;
      padding:0px 0px 0px 0px;
}

Mnou předkládané řešení je postaveno nad spojením sloupců
 řádky následující za hlavičkou, ve které je vytvořena nová
 tabulka se stejným počtem sloupců, aby bylo možné zajistit
 rolování obsahu je tato tabulka umístěna ve víceřádkovém kontejneru
 (elementdiv), kterému jsou nastaveny rolovací parametry
 overflow:scroll a další vlastnosti.