Witam. Koncepcje gridów w Bootstrapie z grubsza poznałem, ale nie wiem jak sie zabrać za tabele - tak żeby na każdym urządzeniu wyświetlić ją sensownie.
Np. tabela z 8 kolumnami:
0
0
(niechcący mi się wysłało przed dokończeniem postu)
Jak zrobić tabele w Bootstrapie - tego typu:
(mirror obrazka z tabelką - http://i.imgur.com/Lm2cXFa.jpg - @dzek69)
Jak ją poprawnie zorganizować w Bootstrap żeby można było sensownie wyświetlić na różnych urządzeniach od PC przez tablet po komórkę??
Dodam oczywiście, że liczba kolumn będzie zmienna, tu jest 8, a może być 3 lub 5, 10,...
0
Możesz jaśniej?
0
To raczej nie kwestia bootstrapa tylko pomysłu ;)
0
docxxx napisał(a):
Możesz jaśniej?
Wydawało mi się, że problem w RWD jest zawsze ten sam.
OK. Wyjaśniam. Tabela którą załączyłem (nie wiem dlaczego teraz się nie wyświetla; no ale jak wygląda tabela każdy wie :) ) wyświetla się dobrze na dużym ekranie (PC, ewentualnie tablet), a już na komórce na małym 3-5 calowym ekranie za chiny jej nie wyświetlimy w całości. Zgoda? Jak użytkownik obejrzy część tabeli, to może nie wiedzieć czego dotyczą dane wiersze, bo nie będzie widział pierwszej kolumny z opisem...
Więc pytam o rozwiązanie tego problemu, czy jak dzek69 pisze "pomysł". Rozważam zrobienie tego tylko w HTML + CSS lub wykorzystanie generowanych grafik, np. SVG czy PNG,...
Jednak nie wiem jak w atrakcyjnej formie przedstawić taką tabele na komórce, z zachowaniem stylu/formy podobnego do tabeli przeznaczonej na PC / tablet i tego wszystkiego co wcześniej napisałem. Dodatkowy problem, to zmienna liczba kolumn.
1
Nie ma wyboru - jak chcesz porównywać - musi być przewijanie poziome. Można by się było pokusić o "przyklejenie" tytułów wierszy do lewej - ale to na tabletach, nie ma telefonach.
Warto będzie na mobilnych powywalać zdjęcia i maksymalnie skrócić dane (czyli tabela niech zawiera tylko cyfry lub wartości TAK/NIE). I np. tak jak masz w przykładowej tabeli "jakość zdjęć", która to podzielona jest na 4 "podinformacje" - zrobić z tego osobne wiersze.
Generalnie to pytanie bardziej do grafika, albo bardziej kogoś od user experience niż programistów ;)
0
A meczu np. dla x-large nie podzielisz sobie tych kolumn do osobnych divow?
Czyli jak masz 8 przedmiotow + opis, to bedesz mial 9 divow col-1 (no i reszta pusta lub ten opis dasz na 4)
Dla mniejszych urzadzen podobnie.
0
dzek69 - ogólnie to tabeli nie mogę skrócić, bo będą różne dane (różne grupy produktów). To nie wchodzi w grę.
Myślałem, żeby zrobić konstrukcję warunkową i jeśli ekran jest mały to zrobić N tabel (gdzie N to liczba produktów). W ten sposób użytkownik by przewijał N tabel (opis+cechy) produktu (opis by się powtarzał każdorazowo). W przeciwnym przypadku (tablet lub PC) wyświetlałby N+1 kolumn (w jednej tabeli, czyli "standardowo").
Nie wiem, czy lepiej to zrobić na grafikach SVG/PNG (łatwiej zachować wszelkie style, ale dłużej się ściąga) czy na HTMLu + CSS?