Blokowanie nagłówków tabeli HTML w pionie poziomie za pomocą CSS

Tym razem zajmiemy się tematyką blokowania nagłówków tabeli na stronie internetowej. Umożliwi to nam budowanie bardziej zaawansowanych tabel na stronach takich nieco przypominających te z Excela lub innego arkusza kalkulacyjnego. Przynajmniej a wyglądu.

Czym jest nagłówek tabeli?

Jak nietrudno się domyśleć nagłówek tabeli to sekcja tabeli, w której umieszczamy istotne informacje dla tabeli. Mogą to być cechy i opis dla kolejnych pól. Wiele osób nie korzysta z tego typu pola bo w większości przypadków spokojnie wystarczy nam zwykłe <td>. W sekcji nagłówka zaczyna się od <thead> używamy znacznika w niej znacznika <th>. Znacznik <th> może być użyty także w innych miejscach (np. jeśli z boku tabeli mamy również cechy, które chcemy wyróżnić).

Dla lepszego zrozumienia możecie przyjęć się grafice wizualizującej tabelkę (<table>)

Przygotowanie szkieletu tabeli

Przygotowanie odpowiedniej struktury tabeli jest bardzo ważnym etapem. Na tym już etapie tworzymy nagłówek tabeli jak i ilość kolumn jakie będzie miała tabelka. Kod tabeli jak zwykle zaczynamy od <table> następnie tworzymy sekcję nagłówka tabelki. W przykładzie jako przykładowy tekst użyję „Lorem ipsum” (jest on dość popularny).

Może on wyglądać następująco:

<thead>
    <tr>
      <th>Lorem</th>
      <th>Ipsum</th>
      <th>Amet</th>
      <th>Dolor</th>
      <th>Lorem</th>
      <th>Dolor</th>
      <th>Amet</th>
      <th>Ipsum</th>
      <th>Ipsum</th>
    </tr>
  </thead>

W kolejnym kroku dodamy ciało tabelki czyli <tbody>. Przykładowo może mieć on kilka wierszy wyglądających następująco:

<tr>
      <td>Nunc libero purus, venenatis</td>
      <td>Consectetur adipiscing elit</td>
      <td>Cras laoreet dolor vitae velit sollicitudin</td>
      <td>Nunc libero purus, venenatis hendrerit feugiat</td>
      <td>Consectetur adipiscing elit</td>
      <td>Cras laoreet dolor vitae velit sollicitudin</td>
      <td>Cras laoreet dolor vitae velit sollicitudin</td>
      <td>Nunc libero purus, venenatis hendrerit feugiat</td>
      <td>Consectetur adipiscing elit</td>
</tr>

Podstawowy wygląd dla mojej tabelki ma kod CSS następujący:

table {
    background: #fff; /* tło tabelki */
    border: 1px solid #888;  
    font-size: 12pt;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 3px;
    font-family: Arial, sans-serif;
}
 
table th,
table td {
    padding: 1rem;
    border: 1px solid #ccc;
    text-align: left;
    white-space: nowrap;
    color: #777; /* kolor treści td */
}
 
table th {
    background-color: #272626; /* tło pod th */
    color: #fff; /* kolor treści dla th */
}

Warto zapoznać się -> Jednostki stosowane w CSS

W jaki sposób zablokować nagłówek tabeli?

Przejdźmy zatem do kolejnego kroku czyli do zablokowania nagłówka tabeli.

Blokowanie nagłówków tabeli w pionie

Zablokowanie sekcji nagłówka (górną belkę) jest stosunkowo proste. Jedyne co musimy zrobić to odpowiednio go ustawić:

table thead th {
    position: sticky;
    top: 0;
    z-index: 15;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

Używamy wiec właściwości CSS:

• position: sticky;
• z-index: 15;

Więcej informacji o właściwości CSS Position znajdziecie tutaj.

Teraz sobie trochę utrudnimy i dodamy sekcje w tabeli. Tym razem by sekcje się od siebie różniły nadam im klasy.

table .darker th, table th {
    background-color: #272626;
    color: #fff;
}
table .dark th{
  background-color: #545252;
}

table .color th{
  background-color: #461c1c;
}

/* block head */

table thead th, table .dark th, table .color th {
    position: sticky;
    top: 0;
    z-index: 15;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

W HTML dodam zaś np.:

<tr class="color">
      <th>Lorem</th>
      <th>Ipsum</th>
      <th>Amet</th>
      <th>Dolor</th>
      <th>Lorem</th>
      <th>Dolor</th>
      <th>Amet</th>
      <th>Ipsum</th>
      <th>Ipsum</th>
    </tr>

Blokowanie nagłówków tabeli w poziomie

By osiągnąć ten efekt należy zmodyfikować należy zmodyfikować pierwszą kolumnę tabeli. W naszym przykładzie zamieniamy kod:

<td>Nunc libero purus, venenatis</td>

Na następujący:

<th>Nunc libero purus, venenatis</th> 
/* pamiętaj by ciało tabeli było w <tbody>  */

Czyli zmieniamy zwykły <td> na <th> oraz dodajemy scope="row". Koniecznie trzeba o tym pamiętać by kod zadziałał prawidłowo.

table tbody th {
    position: sticky;
    left: 0;
    z-index: 9;
    box-shadow: 1px 0 3px rgba(0, 0, 0, 0.2);
}

źródła:

• https://webroad.pl/html5-css3/7939-blokowanie-naglowkow-tabeli-html-w-pionie-poziomie-za-pomoca-css
• https://css-tricks.com/position-sticky-and-table-headers/