Kawałek Kodu

Zdarzało Ci się pracować z jakimś arkuszem kalkulacyjnym? Fajna była opcja zamrożenia pierwszej kolumny, aby widzieć z którym wierszem mamy do czynienia. Równie fajne było zamrażanie nagłówka naszej tabeli z ważnymi wydatkami domowymi. Kiedyś można było tylko westchnąć na myśl o czymś takim w HTML. Były co prawda metody wykorzystujące JavaScript, ale aż mózg trzeszczał kiedy implementowało się ten sposób.

Glue is clue.

Dziś sprawę załatwia cudowne pozycjonowanie sticky, tak dawno wyczekiwane przez webdeveloperów. Już nie trzeba zawracać sobie głowy scrollem, przestawiać z relative na fixed i kombinować z paddingiem. Co będzie potrzeba oprócz dobrych chęci? Jakiś HTML z tabelką, odrobinę CSS i 15 minut wolnego czasu.

<div>
  <table>
    <thead>
      <tr>
        <th>Nr</th>
        <th>Imię</th>
        <th>Nick</th>
        <th>Wygrane</th>
        <th>Przegrane</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>1</td>
        <td>Jan</td>
        <td>jan-</td>
        <td>22</td>
        <td>9</td>
      </tr>
      ... i dalsze wiersze
    </tbody>
  </table>
</div>

Skąd tu się wziął DIV? To będzie nasz kontener, który będzie miał mniejszą szerokość i wysokość niż tabela, będzie posiadał również paski przewijania. Takie okienko, może nie na świat, ale na tabelę. Stąd też ustawimy mu styl overflow: auto, aby posiadał suwaki.

div {
  height: 100vh;
  overflow: auto;
}

table {
  width: 150%;
  border-collapse: collapse;
}

table tr th,
table tr td:first-of-type {
  background: #ddd;
}

table thead th {
  position: sticky;
  top: 0;
}

table tr th:first-of-type,
table tr td:first-of-type {
  position: sticky;
  left: 0;
}

Szerokość tabeli jest ustawiona tylko w celach testowych. Chcemy aby była szersza niż DIV, aby otrzymać poziomy pasek. Natomiast DIV ma zajmować maksymalnie wysokość ekranu - przy dużej ilości wierszy otrzymamy pasek pionowy. Nie będziemy scrollować całej strony, ale tylko przemykać przez poszczególne wiersze. Zanim zamrozimy nagłówek i kolumnę nadajemy komórkom w nich tło, aby pod zamrożonymi komórkami nie prześwitywały komórki, które przewijamy.
No i rzecz najważniejsza, czyli klejonko. Każdą pierwszą komórkę w wierszu przyklejamy do lewej krawędzi kontenera, a każdą komórkę nagłówka przyklejamy do górnej krawędzi.

Efekt jest taki:

To co można zauważyć, to fakt, że zamrożona kolumna przykrywa zamrożony nagłówek (podczas przewijania). Jeśli nam to nie odpowiada, to nadajemy:

table tr th{
  z-index: 1;
}

Ale jeśli zrobimy tylko tak, to niezamrożone komórki z nagłówą będa przykrywać tą jedną, pierwszą komórkę z nagłówka, dlatego dodatkowo dodajemy:

table tr th:first-of-type{
  z-index: 2;
}

Wtedy będzie działać to tak:

Jeśli używasz Bootstrap i tabel responsywnych, to DIV w tym przypadku jest elementem z klasą .table-responsive. Gdybyś chciał natomiast nadać kontenerowi mniejszą wysokość niż pełny ekran, a pod nim umieścić inną zawartość, to nic nie stoi na przeszkodzie. Efekt nadal będzie działać, pamietaj jednak, że mogą pojawić się wtedy dwa paski przewijania - jeden, ten, z którym mieliśmy tu do czynienia, czyli ten od kontenera tabeli, a drugi, to ten główny, pasek okna, jeśli zawartość całej strony będzie większa niż ekran.

Zapraszam Cię gorąco na kolejny wpis. Do przeczytania!