Gällande responsiva tabeller så finns det lite olika angreppssätt:
1. Dölja “mindre viktiga” kolumner. Vid mindre skärmar tar man helt enkelt bort kolumner som man tycker är mindre viktiga. Finns även varianter där man låter användaren välja vilka kolumner han/hon vill se med hjälp av checkboxar och liknande.
2. Göra tabellen scrollbar i sidled, så att man kan scrolla i sidled för att se fler kolumner. Det viktiga är då att om man har en titel i tabellen för varje rad, att titlarna då ligger kvar i vänsterkanten medan man scrollar, så att man förstår vilken rad som är vilken. Det är också viktigt att visuellt signalera att det går att scrolla i sidled så att användaren inte missar det.
3. Dela upp tabellen i flera tabeller som lägger sig under varandra, med ett visst antal kolumner i varje tabell. Detta är väl den minst eleganta lösningen.
Generellt gäller även att man bör fixera tabellens huvud med kolumnrubriker i fönstrets topp när användaren scrollar neråt i tabellen, så att kolumnrubrikerna är synliga även längre ner i tabellen (om den har så många rader att hela tabellen inte får plats på en skärm).
På den här sidan finns några exempel på ovan nämnda varianter: http://elvery.net/demo/responsive-tables/
Och här finns ännu mer läsning i ämnet: http://css-tricks.com/responsive-data-table-roundup/
Mvh
Olof Lönnroth, Interaktionsdesigner
NetRelations