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>

Po co to powiecie? Zaraz wyjaśnię.

Zacznijmy od podstawowego stylu dla tabeli aby jakoś wyglądała ona po „ludzku” 😉

.reservation-box table {
    font-family: "open sans";
    width: 100%;
    border: 1px solid #e7e7e7;
    border-collapse: collapse;
    border-spacing: 0;
}

.reservation-box table thead {
    text-align: left;
    background-color: #f8f8f8;
    font-size: 13px;
    border-bottom: 1px solid #e7e7e7;
}

.reservation-box table td, .reservation-box table th {
    padding: 7px;
}

.reservation-box table [data-title] {
    border-bottom: 1px solid #e7e7e7;
}

Jak widać nic szczególnego na razie.
Druga część kodu css odpowiada za RWD tabeli.

— RWD zacznie się od 768px

@media (max-width: 768px)
</code>
-- Zmieniamy czcionkę na mniejszą można użyć co kto uważa
-- może być rem, vm, vmin czy zwykłe px - więcej info w google ;)
<code>
.reservation-box table {
    font-size: 0.8rem;
}

— usuwamy thead nagłówek tabeli jest już zbędna przy tej szerokości okna

.reservation-box thead {
    display: none;
}

— wszystkie td ustawiamy na display: block
— ustawiamy relative, odsuwamy od lewej tekst na 39% – to już zależy od was
— jeżeli chcemy aby za długi tekst się obcinał do … kropek dodajemy:
— text-overflow ellipsis
— white-space nowrap
— overflow hidden

.reservation-box td {
    display: block;
    border: none;
    position: relative;
    padding-left: 39% !important;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

— w tym miejscu do tr dodałem większy border
— aby podkreślić gdzie kończy się odstęp między rekordami

.reservation-box tr {
    border-bottom: 2px solid #a3a3a3;
    width: 100%;
}

.reservation-box tr [data-title] {
border-bottom: 1px solid #e7e7e7;
}

— najważniejsza część „magii” 😉
— do td został dodany pseudo-element before właśnie to on robi całą magię
— a mianowicie z atrybutu data-title szczytuje nazwy kolumn które ustawiliśmy przy td
— tutaj dajemy position absolute i dla tego wyżej w td było position relative 🙂
— ustawiamy szerokość na 31%, czcioneczka na bold aby było widać że to coś innego niż zwykły tekst w komórce
— dodajemy przy zbyt długich nazwach w data-title zanikanie tekstu,
— przy zmniejszaniu szerokości okna powinny znikać ostanie litery
— i pojawić się … (np. Data ostatniej… – działa to od IE8 więc bez obaw)

.reservation-box tr.reservation-row-item td:before {
    position: absolute;
    font-size: 0.8rem;
    top: 0;
    left: 0;
    width: 31%;
    padding: 8px 8px 8px 10px;
    text-align: left;
    font-weight: bold;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    content: attr(data-title);
    border-right: 1px solid #e7e7e7;
}

Poniżej tabela w rozdzielczości większej niż 768px

przed

Oraz po zmniejszeniu szerokości okna:

po

O wiele lepiej wygląda w RWD 😉

Poniżej cały kod CSS.

.reservation-box table {
    font-family: "open sans";
    width: 100%;
    border: 1px solid #e7e7e7;
    border-collapse: collapse;
    border-spacing: 0;
}

.reservation-box table thead {
    text-align: left;
    background-color: #f8f8f8;
    font-size: 13px;
    border-bottom: 1px solid #e7e7e7;
}

.reservation-box table td, .reservation-box table th {
    padding: 7px;
}

.reservation-box table [data-title] {
    border-bottom: 1px solid #e7e7e7;
}

@media (max-width: 768px) {

    .reservation-box table {
        font-size: 0.8rem;
    }

    .reservation-box thead {
        display: none;
    }

    .reservation-box td {
        display: block;
        border: none;
        position: relative;
        padding-left: 39% !important;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .reservation-box tr {
        border-bottom: 2px solid #a3a3a3;
        width: 100%;
    }

    .reservation-box tr [data-title] {
        border-bottom: 1px solid #e7e7e7;
    }

    .reservation-box tr.reservation-row-item td:before {
        position: absolute;
        font-size: 0.8rem;
        top: 0;
        left: 0;
        width: 31%;
        padding: 8px 8px 8px 10px;
        text-align: left;
        font-weight: bold;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        content: attr(data-title);
        border-right: 1px solid #e7e7e7;
    }

}