Logo

Blog o JavaScript, jQuery, HTML5, CSS3 i 4. Porady jak pisać dobrej jakości kod, tutoriale, nowości.

RWD - elastyczne tabelki

  • 20.06.2012 11:25:04
  • CSS
  • 1

Przy tworzeniu stron, które mają się dobrze wyświetlać na urządzeniach mobilnych, problematyczne mogą być dane tabelaryczne. Wszystko zależy od ilości danych jakie będzie miała w sobie taka tabelka. I tu pojawia się zasadnicze pytanie: co pokazać użytkownikowi?

Problem

Weźmy na przykład tabelkę z zestawieniem kredytów na fajny samochód. Użytkownik chce szybko zobaczyć w jakim banku będzie mu się opłacało wziąć pożyczkę na samochód. W tabeli takiej będziemy mieli takie informacje jak:

Cały problemy polega na pokazaniu odpowiednich informacji w zależności od urządzenia (a właściwie szerokości ekranu). Większym urządzeniom możemy pokazać wszystkie informacje. Mniejszym będziemy pokazywać, np. te które są mniej przydatne czyli: prowizję i oprocentowanie. Jeszcze mniejszym będziemy pokazywać jeszcze mniej informacji.

Rozwiązanie

W moim konkretnym przypadku, skupiłem się na 3 wielkościach ekranu:

W zależności od wielkości pokazywane są odpowiednie kolumny. Kluczowe są tutaj trzy klasy css: .optional, .optional-s, .optional-ss przypisane do konkretnych kolumn. Teraz za pomocą media queries możemy kontrolować które kolumny będą widoczne. W tym konkretnym przypadku wygląda to następująco:

@media all and (max-width: 640px) {
   table .optional {
      display: none;
   }
}

@media all and (max-width: 480px) {
   table .optional-s {
      display: none;
   }
}

@media all and (max-width: 320px) {
   table .optional-ss {
      display: none;
   }
}

Specjalnie nie skupiałem się na przeglądarkach które nie wspierają media queries, bo jest to temat na oddzielny i dłuższy wpis.

Zobacz przykład.

Autor wpisu

Piotr cichosz (shpyo) — Front-end developer Twórca kilku serwisów internetowych oraz autor kilku blogów. Pasjonat nowych, otwartych technologii.

Komentarze

Gavatar Olek

26.01.2013 Olek

Fajny tip, wykorzystam go niebawem w jednym projekcie :)

Dodaj komentarz