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

Czas czytania: 2 minut

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. Cechy i opis dla kolejnych pól. To co znajduje się w nagłówku zależy od tego co umieścimy w nagłówku. 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. Może ona wyglądać następująco:

<thead>
    <tr>
      <th>Lorem</th>
      <th>Ipsum</th>
      <th>Dolor</th>
      <th>Amet</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 {
    color: #333; /* kolor treści */
    background: white;
    border: 1px solid #888;
    font-size: 12pt;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 3px;
    font-family: Arial, Helvetica, sans-serif;
}
 
table th,
table td {
    padding: 1rem;
    border: 1px solid #333;
    text-align: left;
    white-space: nowrap;
    color: #777;
}
 
table th {
    background-color: #3d3d3d;
    color: #fff;
}

Jak zablokować nagłówek tabeli?

Przejdźmy zatem do kolejnego kroku czyli do zablokowania nagłówka a potem 1 kolumny 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: 10;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

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

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

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

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 scope="row">Nunc libero purus, venenatis</th>

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[scope=row] {
    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