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
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;
}
}