[HTML|CSS] Tabela z możliwością przewijania i stałą kolumną (sticky column)

W świecie danych, gdzie ilość informacji często przytłacza, ważne jest znalezienie skutecznego sposobu na zarządzanie i prezentowanie tych danych. Jednym z najpopularniejszych narzędzi do organizowania danych w przejrzysty sposób są tabele. Co zatem zrobić, gdy nasza tabela zawiera nie kilka, ale nawet dziesiątki kolumn, które ciężko byłoby wyświetlić na stronie bez odpowiedniego rozwiązania? W takich sytuacjach doskonałym rozwiązaniem jest zastosowanie tabel z możliwością przewijania i stałą kolumną z nagłówkami.

Nieruchome kolumny, znane również jako "sticky columns", to technika, która pozwala na "zamrożenie" określonych kolumn podczas przewijania tabeli. Dzięki temu kluczowe informacje, takie jak nagłówki czy identyfikatory, pozostają widoczne, co znacząco ułatwia nawigację po dużych zbiorach danych. W tym wpisie pokażę jak stworzyć właśnie taką tabelę.

Stwórzmy przykładową tabelę, a w zasadzie dwie:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Auta</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }

        .table-container {
            display: flex;
            overflow: hidden; /* Ukrywamy nadmiar */
        }
        
        .left-column {
            min-width: 150px; /* Minimalna szerokość lewej kolumny */
            background: #f9f9f9;
            border-right: 2px solid #ccc;
        }

        .scrollable {
            overflow-x: auto; /* Przewijanie w poziomie */
            white-space: nowrap; /* Zapobiegamy łamaniu wierszy w tabeli */
        }

        table {
            border-collapse: collapse; /* Zmniejszamy odstępy między komórkami */
            width: 100%; /* Ustawiamy szerokość na 100% dostępną w kontenerze */
        }

        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <div class="table-container">
        <div class="left-column">
            <table>
                <tr><th>Model</th></tr>
                <tr><td>Toyota Corolla</td></tr>
                <tr><td>Ford Focus</td></tr>
                <tr><td>Volkswagen Golf</td></tr>
                <tr><td>Honda Civic</td></tr>
                <tr><td>Audi A3</td></tr>
                <tr><td>BMW 3</td></tr>
                <tr><td>Mercedes-Benz A-Class</td></tr>
                <tr><td>Opel Astra</td></tr>
                <tr><td>Hyundai i30</td></tr>
                <tr><td>Peugeot 308</td></tr>
            </table>
        </div>
        <div class="scrollable">
            <table>
                <thead>
                    <tr>
                        <th>Marka</th>
                        <th>Rok</th>
                        <th>Moc (KM)</th>
                        <th>Pojemność (L)</th>
                        <th>Napęd</th>
                        <th>Zużycie paliwa (l/100 km)</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Toyota</td>
                        <td>2020</td>
                        <td>132</td>
                        <td>1.8</td>
                        <td>FWD</td>
                        <td>6.5</td>
                    </tr>
                    <tr>
                        <td>Ford</td>
                        <td>2021</td>
                        <td>125</td>
                        <td>1.5</td>
                        <td>FWD</td>
                        <td>5.9</td>
                    </tr>
                    <tr>
                        <td>Volkswagen</td>
                        <td>2022</td>
                        <td>150</td>
                        <td>2.0</td>
                        <td>FWD</td>
                        <td>6.2</td>
                    </tr>
                    <tr>
                        <td>Honda</td>
                        <td>2021</td>
                        <td>175</td>
                        <td>2.0</td>
                        <td>FWD</td>
                        <td>6.8</td>
                    </tr>
                    <tr>
                        <td>Audi</td>
                        <td>2023</td>
                        <td>150</td>
                        <td>2.0</td>
                        <td>AWD</td>
                        <td>7.0</td>
                    </tr>
                    <tr>
                        <td>BMW</td>
                        <td>2023</td>
                        <td>184</td>
                        <td>2.0</td>
                        <td>AWD</td>
                        <td>7.3</td>
                    </tr>
                    <tr>
                        <td>Mercedes-Benz</td>
                        <td>2022</td>
                        <td>140</td>
                        <td>1.3</td>
                        <td>FWD</td>
                        <td>6.9</td>
                    </tr>
                    <tr>
                        <td>Opel</td>
                        <td>2021</td>
                        <td>110</td>
                        <td>1.2</td>
                        <td>FWD</td>
                        <td>5.5</td>
                    </tr>
                    <tr>
                        <td>Hyundai</td>
                        <td>2020</td>
                        <td>120</td>
                        <td>1.6</td>
                        <td>FWD</td>
                        <td>6.0</td>
                    </tr>
                    <tr>
                        <td>Peugeot</td>
                        <td>2021</td>
                        <td>130</td>
                        <td>1.5</td>
                        <td>FWD</td>
                        <td>5.7</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>

Efekt:

Model
Toyota Corolla
Ford Focus
Volkswagen Golf
Honda Civic
Audi A3
BMW 3
Mercedes-Benz A-Class
Opel Astra
Hyundai i30
Peugeot 308
Marka Rok Moc (KM) Pojemność (L) Napęd Zużycie paliwa (l/100 km)
Toyota 2020 132 1.8 FWD 6.5
Ford 2021 125 1.5 FWD 5.9
Volkswagen 2022 150 2.0 FWD 6.2
Honda 2021 175 2.0 FWD 6.8
Audi 2023 150 2.0 AWD 7.0
BMW 2023 184 2.0 AWD 7.3
Mercedes-Benz 2022 140 1.3 FWD 6.9
Opel 2021 110 1.2 FWD 5.5
Hyundai 2020 120 1.6 FWD 6.0
Peugeot 2021 130 1.5 FWD 5.7

Komentarze

Prześlij komentarz

Dzięki za komentarz!

Popular

[C++] Jak obliczyć pole i obwód trapezu?

Przed napisaniem programu obliczającego pole i obwód trapezu, przypomnij sobie wzory. Pole trapezu liczymy według wzoru P=((a+b)*h)/2. Wzór na obwód Ob=a+b+c+d. Obliczając pole trapezu musimy znać rozmiary dwóch podstaw i wysokości. Obliczamy pole trapezu #include <iostream> using namespace std; int main() { int a; int b; int h; double p; cout << "Podaj długość podstawy a: "; cin >> a; cout << "Podaj długość podstawy b: "; cin >> b; cout << "Podaj wysokość: "; cin >> h; if(cin.good() == true) { p = ((a + b) * h) / 2.0; cout << "Pole trapezu wynosi: " << p; } return 0; } Obliczamy obwód trapezu #include <iostream> using namespace std; int main() { int a, b, c, d, ob; cout << "Podaj długość boku a: "; cin >> a; cout << "Podaj długość boku b: "; cin >> b; cout << "Podaj długość boku c: "; cin >> c;...
Czytaj więcej

[HTML] Jak wyśrodkować tekst?

Wyśrodkowanie tekstu w HTML nie jest trudne. Wystarczy tylko zastosować odpowiednią regułę CSS dla elementu, w którym znajduje się dany tekst. W tym przypadku chodzi o regułę text-align:center . Przykład Załóżmy, że mamy nagłówek h1 z tytułem strony i chcemy, aby był on umieszczony po środku. Dopisujemy do niego następujący fragment: style="text-align:center;" - tak jak poniższym przykładzie: <h1 style="text-align:center;">Hello World!</h1> Analogicznie robimy dla innych elementów HTML.
Czytaj więcej

[PHP|HTML] Odświeżenie strony

W tym wpisie zajmiemy się odświeżaniem strony z poziomu PHP jak i poprzez odpowiedni metatag HTML. Zapewne tworząc lub modyfikując jakąś stronę HTML spotkałeś/-aś się kiedyś z tagiem meta refresh . Jak pamiętasz (lub nie) tag ten służy do odświeżania lub przekierowania na inny URL z poziomu klienta. W takim razie co zrobić, gdy chcemy takie odświeżenie lub przekierowanie wymusić po stronie serwera? W języku PHP z pomocą przychodzi nam funkcja header , która służy do wysyłania surowych nagłówków HTTP do przeglądarki. Funkcja jest prosta w użyciu, a kod umożliwiający odświeżenie strony ogranicza się do jednej linii. My jednak napiszemy własną funkcję, która będzie odświeżała stronę. Nasza funkcja będzie oczywiście oparta o funkcję header. Odświeżanie strony HTML Aby emulować nagłówki HTTP z poziomu kodu HTML, należy użyć tagu meta http-equiv . Jeśli zatem chcemy odświeżyć lub przekierować stronę z poziomu przeglądarki, tworzymy w sekcji head taki tag: <meta http-equiv="refresh...
Czytaj więcej