Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

Zapewnienie minimalnej responsywności tabel HTML

wtorek,

Zapewnienie minimalnej responsywności tabel HTML

Tabele HTML mogą sprawić spore problemy użytkownikom wykorzystującym urządzenia z wąskim ekranem. Prezentowane rozwiązanie nie jest idealne, jednak daje dostęp do pełnej zawartości tabeli i jest bardzo proste w implementacji, dodatkowo nie wymagając nakładu pracy. Chwytając myszą z trójkąt w dolnej, prawej części poniższej ramki i przeciągając go w lewo, można symulować wąski ekran. W przeciwieństwie do standardowo osadzonej tabeli element nie jest bezpowrotnie „przycinany”, dzięki paskowi przewijania użytkownik ma dostęp do danych.

Model Data wydania Rdzenie Częstotliwość Cache
Intel Atom® Processor P5942B luty 2020 16 2,20 GHz 18 MB L2 Cache
Intel Atom® Processor P5931B luty 2020 12 2,20 GHz 13,5 MB L2 Cache
Intel Atom® Processor P5962B luty 2020 24 2,20 GHz 27 MB L2 Cache
Intel Atom® Processor P5921B luty 2020 8 2,20 GHz 9 MB L2 Cache

Prezentowane rozwiązanie jest bardzo proste, tabelę opakowano elementem div ze stylem CSS wykorzystującym własność overflow-x, która odpowiada za sytuację, kiedy zawartość elementu podrzędnego przepełni obszar krawędzi pola w poziomie. Jej możliwe wartości to:

  • visible – przekraczająca element nadrzędny treść pozostaje widoczna, jest to wartość domyślna;
  • hidden – przekraczająca element nadrzędny treść zostaje ukryta;
  • scroll – pojawia się pasek przewijania, nawet jeśli nie jest potrzebny;
  • auto – pasek przewijania pojawia się, jeśli jest potrzeby;
  • initial – właściwość na wartość domyślną;
  • inherit – wartość jest dziedziczona po elemencie nadrzędnym;

Poniżej znajduje się kod prezentowanego przykładu.

<div style="overflow-x:auto;">
<table>
	<thead>
    <tr>
        <th>Model</th>
        <th>Data wydania</th>
        <th>Rdzenie</th>
        <th>Częstotliwość</th>
        <th>Cache</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Intel Atom® Processor P5942B</td>
        <td>luty 2020</td>
        <td>16</td>
        <td>2,20 GHz</td>
        <td>18 MB L2 Cache</td>
    </tr>
    <tr>
        <td>Intel Atom® Processor P5931B</td>
        <td>luty 2020</td>
        <td>12</td>
        <td>2,20 GHz</td>
        <td>13,5 MB L2 Cache</td>
    </tr>
    <tr>
        <td>Intel Atom® Processor P5962B</td>
        <td>luty 2020</td>
        <td>24</td>
        <td>2,20 GHz</td>
        <td>27 MB L2 Cache</td>
    </tr>
    <tr>
        <td>Intel Atom® Processor P5921B</td>
        <td>luty 2020</td>
        <td>8</td>
        <td>2,20 GHz</td>
        <td>9 MB L2 Cache</td>
    </tr>
    </tbody>
</table>
</div>
Artykuł: Dzień, w którym słońce zaszło w&nbsp;południe

Dzień, w którym słońce zaszło w południe

Artykuł: Konferencja teherańska

Konferencja teherańska

Artykuł: Utworzenie Marynarki Wojennej

Utworzenie Marynarki Wojennej

Artykuł: Dekret o ordynacji wyborczej

Dekret o ordynacji wyborczej

Artykuł: Arm Holdings

Arm Holdings

Artykuł: Podstawowe style CSS dla formularza

Podstawowe style CSS dla formularza

Nasze technikum

Szkoły dla dorosłych

Pełna oferta edukacyjna