23 Sty 2015

Tabele w RWD

Powiedzmy że posiadamy tabelę z rezerwacjami hotelowymi.
Jeżeli zmniejszymy rozdzielczość na wielkość znaczka pocztowego – powiedzmy 320px to nic nie będzie widać i tutaj z pomocą przychodzi CSS.
Poniższe rozwiązanie działa od IE8 no i oczywiście w nowych przeglądarkach 😉

Przykładowa a tak wygląda tabela.

<section class="reservation-box">
    <table class="table-reservation">
        <thead>
        <tr>
            <th>Nazwisko i imię</th>
            <th>Telefon</th>
            <th>Adres e-mail</th>
            <th>Liczba wizyt</th>
            <th>Data ostatniej rezerwacji</th>
        </tr>
        </thead>
        <tbody>
        <tr class="reservation-row-item">
            <td data-title="Nazwisko i imię">Pałczyński stefan</td>
            <td data-title="Telefon">14725836</td>
            <td data-title="Adres e-mail">palczynski.stefan@gmail.com</td>
            <td data-title="Liczba wizyt">0</td>
            <td data-title="Data ostatniej rezerwacji">nie odbyła się</td>
        </tr>
        <tr class="reservation-row-item">
            <td data-title="Nazwisko i imię">Miałczyński Cezary</td>
            <td data-title="Telefon">69522999</td>
            <td data-title="Adres e-mail">mcezik@tet.pl</td>
            <td data-title="Liczba wizyt">1</td>
            <td data-title="Data ostatniej rezerwacji">28 stycznia 2014</td>
        </tr>
        <tr class="reservation-row-item">
            <td data-title="Nazwisko i imię">Tomaczek Andrzej</td>
            <td data-title="Telefon">32999222</td>
            <td data-title="Adres e-mail">tomaczekandrzej@jawa.pl</td>
            <td data-title="Liczba wizyt">1</td>
            <td data-title="Data ostatniej rezerwacji">20 stycznia 2015</td>
        </tr>
        </tbody>
    </table>
</section>

Jak widać tabela jak tabela, wygląda normalnie ale pojawiło się coś w komórkach „data-title” – atrybuty, te same nazwy co w sekcji thead > th.

<tr class="reservation-row-item">
    <td data-title="Nazwisko i imię">Pałczyński stefan</td>
    <td data-title="Telefon">14725836</td>
    <td data-title="Adres e-mail">palczynski.stefan@gmail.com</td>
    <td data-title="Liczba wizyt">0</td>
    <td data-title="Data ostatniej rezerwacji">nie odbyła się</td>
</tr>