Rozsiahle tabuľky a CSS

4. června 2003

•

Rozsiahle tabuľky majú jednu nevýhodu – keď sme na ich konci netušíme, čo príslušné dáta znamenajú. Preto musíme tabuľku posunúť smerom hore, aby sme zobrazili jej záhlavie. Prečo to robiť manuálne? Nemôže to za nás urobiť niekto iný? Tušíte správne, môže!

Pri správnej štruktúre tabuľky…

<table>
<thead>
  <tr><th>Stĺpec 1</th><th>Stĺpec 2</th><th>Stĺpec 3</th></tr>
</thead>
<tbody>
  <tr><td>Data</td><td>Data</td><td>Data</td></tr>
  <!– ostatné riadky –>
  <tr><td>Data</td><td>Data</td><td>Data</td></tr>
</tbody>
</table>

…použijeme toto CSS pravidlo:

tbody {
height: 10em;
overflow: auto;
}

Tento spôsob je funkčný len v prehliadačoch postavených na Gecku (Mozilla, NS7+ a ďalšie).

Čo na to Internet Explorer?

Pre tento prehliadač som po krátkom pátraní objavil riešenie, ktoré využíva neštandardné rozšírenie CSS. Ako hodnotu CSS vlastnosti umožňuje použiť takzvaný výraz (expression()). HTML kód bolo potrebné nasledovne upraviť:

<div id=“scroll“>
<table>
  <thead>
   <tr><th>Stĺpec 1</th><th>Stĺpec 2</th><th>Stĺpec 3</th></tr>
  </thead>
  <tbody>
   <tr><td>Data</td><td>Data</td><td>Data</td></tr>
   <!– ostatné riadky –>
   <tr><td>Data</td><td>Data</td><td>Data</td></tr>
  </tbody>
</table>
</div>

CSS kód pre IE verziu bude nasledovný:

#scroll {
    height: 10em;
    overflow: auto;
}
#scroll thead tr {
    position: relative;
    top: expression(this.offsetParent.offsetTop);
    background-color: inherited;
    color: inherited;
}
#scroll table {
    width: expression(this.offsetParent.clientWidth);
}

Posúvanie tabuľky nám zabezpečí vloženie tabuľky do divu a príslušné CSS pravidlo (#scroll). Zobrazenie záhlavia tabuľky, ktoré sa nebude posúvať, dosiahneme pomocou pravidla #thead tr. Pravidlo #scroll table zabezpečí roztiahnutie tabuľky v dive #scroll. Nezabúdajte:

Nastaviť pozadie riadku so záhlavím tabuľky.
Riešenie je funkčne len pri zapnutom Javascripte. (Použili sme ‚expression‘.)

A riešenie?

Cesta k výsledku nebude ľahká. Uvedené spôsoby sa navzájom vylučujú:

V Gecko prehliadačoch budú zobrazené dva posuvníky (z #scroll a z tbody).
V IE bude mať každý riadok tabuľky výšku 10em.
Pri zakázanom JS v IE bude tabuľka posúvateľná celá ako je.

Preto musíme urobiť nasledovné:

CSS pre IE sa musí zobraziť len v IE pri zapnutom Javascripte:
<!–[if lte IE 6]>
  <script type=“text/javascript“>
    document.write(‚<link rel=“stylesheet“ type=“text/css“ href=“ietable.css“ />‘);
  </script>
<![endif]–>

Podmienený komentár bude spracovaný len v IE verzie 6 a menej (IE7 možno prekvapí a bude v podobnej situácii ako s Gecko prehliadačmi) Pri funkčnom Javascripte sa k dokumentu pripojí CSS súbor „ietable.css“, v ktorom je CSS kód pre IE verziu.
Pred IE je potrebné skryť CSS pravidlo, ktoré určuje výšku tbody:
#scroll[id] tbody {
height: 10em;
overflow: auto; }

Výsledný HTML a CSS kód

<!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=“en“ lang=“en“>
<head>
  <meta http-equiv=“Content-type“ content=“text/html; charset=utf-8″ />
  <style type=“text/css“>
    body, th, td {
      background-color: white;
      color: black;
      font-size: 100%;
    }
    #scroll {
      width: 500px;
    }
    #scroll[id] tbody {
      overflow: auto;
      height: 10em;
    }
    #scroll table {
      width: 100%;
    }
  </style>
  <!–[if lte IE 6]>
  <script type=“text/javascript“>
    document.write(‚<link rel=“stylesheet“ type=“text/css“ href=“ietable.css“ />‘);
  </script>
  <![endif]–>
</head>
<body>
  <div id=“scroll“>
    <table>
      <thead>
        <tr><th>Stĺpec 1</th><th>Stĺpec 2</th><th>Stĺpec 3</th></tr>
      </thead>
      <tbody>
        <tr><td>Data</td><td>Data</td><td>Data</td></tr>
        <!– ostatné riadky –>
        <tr><td>Data</td><td>Data</td><td>Data</td></tr>
      </tbody>
    </table>
  </div>
</body>
</html>

Popísané riešenie je funkčné v IE5+ a Gecko prehliadačoch (viz príklad). Pre ostatné prehliadače sa zobrazí celá tabuľka. Podpora viacerých prehliadačov je možná len s využitím Javascriptu.