úterý 10. června 2003

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.

Kódovaný JScript

Používáte atribut language elementu script? Pokud ano tak vězte, že může nabývat hodnoty JScript.Encode. To by nebylo nic tak zvláštního, ale všimněte si výrazu za tečkou. Ten totiž udává, že klientský skript uvozený v tomto tagu s tímto atributem, je šifrovaný. Pokud jste alespoň stejně překvapeni jako já, tak si můžete přečíst co o téhle málo známe vlastnosti zjistil Yuhů v příspěvku Kódovaný javascript.