wtorek, 2020-10-20

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.

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>