CodeGym /Kursy /Frontend SELF PL /Tabele responsywne

Tabele responsywne

Frontend SELF PL

Poziom 26 , Lekcja 3

Dostępny

9.1 Przewijanie (Scroll)

Tabele są często używane do wyświetlania danych strukturalnych, ale mogą być trudne do wyświetlania na urządzeniach z małymi ekranami. Tabele responsywne pozwalają poprawić odbieranie i interakcję z danymi na różnych urządzeniach, w tym telefonach komórkowych i tabletach. Omówmy kilka technik tworzenia responsywnych tabel.

Jedną z prostych metod na tworzenie tabel responsywnych jest dodanie przewijania poziomego. Ta metoda zachowuje strukturę tabeli i pozwala użytkownikom przewijać dane w poziomie na wąskich ekranach.

Przykład:

CSS

    
      .table-container {
        overflow-x: auto;
        width: 100%;
      }

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

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

HTML

    
      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Responsywna tabela z przewijaniem</title>
        <link rel="stylesheet" href="styles.css">
      </head>
      <body>
      <div class="table-container">
        <table>
          <thead>
          <tr>
            <th>Kolumna 1</th>
            <th>Kolumna 2</th>
            <th>Kolumna 3</th>
            <th>Kolumna 4</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>Dane 1</td>
            <td>Dane 2</td>
            <td>Dane 3</td>
            <td>Dane 4</td>
          </tr>
          <!-- Inne wiersze -->
          </tbody>
        </table>
      </div>
      </body>
      </html>

Objaśnienie kodu:

.table-container: dodaje przewijanie poziome, jeśli tabela przekracza szerokość kontenera
table: ustawia szerokość tabeli na 100% i scala granice komórek

9.2 Ukrywanie kolumn (Column Hiding)

Ta metoda polega na ukrywaniu mniej ważnych kolumn na wąskich ekranach, aby główne dane pozostały widoczne. Można to osiągnąć za pomocą Media Queries.

Przykład:

CSS

    
      @media (max-width: 600px) {
        .hide {
          display: none;
        }
      }

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

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

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Responsywna tabela z ukrywaniem kolumn</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <table>
            <thead>
            <tr>
              <th>Kolumna 1</th>
              <th>Kolumna 2</th>
              <th class="hide">Kolumna 3</th>
              <th class="hide">Kolumna 4</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>Dane 1</td>
              <td>Dane 2</td>
              <td class="hide">Dane 3</td>
              <td class="hide">Dane 4</td>
            </tr>
            <!-- Inne wiersze -->
            </tbody>
          </table>
        </body>
      </html>

Objaśnienie kodu:

.hide: ukrywa określone kolumny na ekranach o szerokości mniejszej niż 600px za pomocą media queries
table: ustawia szerokość tabeli na 100% i scala granice komórek

9.3. Zmiana układu na bloki (Stacking)

Zmiana układu na bloki zmienia wiersze tabeli na bloki, które są wyświetlane jeden pod drugim na wąskich ekranach. Dzięki temu tabela jest bardziej czytelna na urządzeniach mobilnych.

Przykład:

CSS

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

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

      @media (max-width: 600px) {
        table, thead, tbody, th, td, tr {
          display: block;
        }

        th {
          display: none;
        }

        td {
          display: flex;
          justify-content: space-between;
          padding: 10px;
          border-bottom: 1px solid #ccc;
        }

        td::before {
          content: attr(data-label);
          font-weight: bold;
        }
      }

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Responsywna tabela z układem blokowym</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <table>
            <thead>
            <tr>
              <th>Kolumna 1</th>
              <th>Kolumna 2</th>
              <th>Kolumna 3</th>
              <th>Kolumna 4</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td data-label="Kolumna 1">Dane 1</td>
              <td data-label="Kolumna 2">Dane 2</td>
              <td data-label="Kolumna 3">Dane 3</td>
              <td data-label="Kolumna 4">Dane 4</td>
            </tr>
            <!-- Inne wiersze -->
            </tbody>
          </table>
        </body>
      </html>

Objaśnienie kodu:

Media Queries: przekształcają tabelę w elementy blokowe na ekranach o szerokości mniejszej niż 600px
td::before: dodaje pseudoelement z nazwą kolumny przed każdą wartością komórki, aby zachować kontekst danych

9.4. Transformacja do kart (Card Layout)

Ta metoda polega na przekształceniu każdego wiersza tabeli w osobną kartę na wąskich ekranach. Pomaga to poprawić czytelność danych na urządzeniach mobilnych.

Przykład:

CSS

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

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

      @media (max-width: 600px) {
        table, thead, tbody, th, td, tr {
          display: block;
        }

        th {
          display: none;
        }

        tr {
          margin-bottom: 10px;
          border-bottom: 2px solid #ccc;
          padding-bottom: 10px;
        }

        td {
          display: flex;
          justify-content: space-between;
          padding: 10px 0;
          border: none;
        }

        td::before {
          content: attr(data-label);
          font-weight: bold;
          margin-right: 10px;
        }
      }

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Responsywna tabela z układem kart</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <table>
            <thead>
            <tr>
              <th>Kolumna 1</th>
              <th>Kolumna 2</th>
              <th>Kolumna 3</th>
              <th>Kolumna 4</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td data-label="Kolumna 1">Dane 1</td>
              <td data-label="Kolumna 2">Dane 2</td>
              <td data-label="Kolumna 3">Dane 3</td>
              <td data-label="Kolumna 4">Dane 4</td>
            </tr>
            <!-- Inne wiersze -->
            </tbody>
          </table>
        </body>
      </html>

Objaśnienie kodu:

Media Queries: przekształcają tabelę w elementy blokowe i tworzą karty na ekranach o szerokości mniejszej niż 600px
td::before: dodaje pseudoelement z nazwą kolumny przed każdą wartością komórki, aby zachować kontekst danych

9.5 Korzystanie z CSS Frameworks

Wiele CSS-frameworków, takich jak Bootstrap, oferuje wbudowane rozwiązania do tworzenia tabel responsywnych. Korzystanie z takich frameworków upraszcza proces i zapewnia gotowe style oraz komponenty.

Przykład z użyciem Bootstrap:

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Responsywna tabela z Bootstrap</title>
          <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
        </head>
        <body>
          <div class="container">
            <table class="table table-responsive">
              <thead>
              <tr>
                <th>Kolumna 1</th>
                <th>Kolumna 2</th>
                <th>Kolumna 3</th>
                <th>Kolumna 4</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td>Dane 1</td>
                <td>Dane 2</td>
                <td>Dane 3</td>
                <td>Dane 4</td>
              </tr>
              <!-- Inne wiersze -->
              </tbody>
            </table>
          </div>
          <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
          <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
          <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
        </body>
      </html>

Objaśnienie kodu:

table.table-responsive: klasa Bootstrap, która dodaje przewijanie poziome dla tabel na wąskich ekranach
container: klasa Bootstrap do centrowania i nadawania maksymalnej szerokości kontenerowi

Poprzednia Poprzednia lekcja

Następny Następna lekcja

Komentarze

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION