menu

Tabeller

Visar olika form av data som kan sorteras, markeras, klickas eller summeras.

Responsiv tabell - stack

Om man har en tabell som innehåller förutsägbara värden rakt upp och ner passar det att stacka den.

Tips: Minska storleken på Webbläsarfönstret för att se hur det funkar

Exempel

Mottagningsplats: Södra Timber Mönsterås
Kvalitet Styck Värde 1 Värde 2 Värde 3 Värde 4 Kvantitet Värde SEK
Klass 1 370 18 96 472 15 66,1 m3fub 38 437
Klass 2 48 65 39 124 12 11 m3fub 6 392
Klass 3 0 13 1 108 56 10,2 m3fub 3 038
Mottagningsplats: Södra Timber Mönsterås
Kvalitet Styck Värde 1 Värde 2 Värde 3 Värde 4 Kvantitet Värde SEK
Klass 1 370 18 96 472 15 66,1 m3fub 38 437
Klass 2 48 65 39 124 12 11 m3fub 6 392
Klass 3 0 13 1 108 56 10,2 m3fub 3 038

Responsiv tabell - swipe

För tabeller med mer oregelbunden data passar den här strategin bättre. Kolumner döljs allteftersom att det tillgängliga utrymmet minskar men man kan scrolla i sidled.

Tips: Minska storleken på Webbläsarfönstret för att se hur det funkar

Exempel

Mottagningsplats: Södra Timber Mönsterås
Kvalitet Styck Kvantitet Värde SEK
90,3 m3fub 48 782
Klass 1 370 66,1 m3fub 38 437
Klass 2 48 11 m3fub 6 392
0 10,2 m3fub 3 038
Prisgrundande kvantitet 418 87,2 m3fub 47 867
Vrak 4 0,7 m3fub 47 867
Längd- och diameteravdrag 0 0 m3fub
Övermått 0 2,4 m3fub
Bruttokvantitet 422 90,3 m3fub
Vrakersättning 57
Certif tillägg 896
Timber 2000 -38
Mottagningsplats: Södra Timber Mönsterås
Kvalitet Styck Kvantitet Värde SEK
90,3 m3fub 48 782
Klass 1 370 66,1 m3fub 38 437
Klass 2 48 11 m3fub 6 392
0 10,2 m3fub 3 038
Prisgrundande kvantitet 418 87,2 m3fub 47 867
Vrak 4 0,7 m3fub 47 867
Längd- och diameteravdrag 0 0 m3fub
Övermått 0 2,4 m3fub
Bruttokvantitet 422 90,3 m3fub
Vrakersättning 57
Certif tillägg 896
Timber 2000 -38

Datatabell

Beskrivning

...

Exempel

Summa 113 m3fub
keyboard_arrow_right keyboard_arrow_down Normaltimmer 50 m3fub
Sortiment 1 20 m3fub
Sortiment 2 17 m3fub
Sortiment 3 13 m3fub
keyboard_arrow_right keyboard_arrow_down Klenvirke 5 m3fub
Sortiment 1 20 m3fub
Sortiment 2 17 m3fub
Sortiment 3 13 m3fub
keyboard_arrow_right keyboard_arrow_down Massaved 5 m3fub
Sortiment 1 20 m3fub
Sortiment 2 17 m3fub
Sortiment 3 13 m3fub
Övrigt 5 m3fub
Summa 113 m3fub
keyboard_arrow_right keyboard_arrow_down Normaltimmer 50 m3fub
Sortiment 1 20 m3fub
Sortiment 2 17 m3fub
Sortiment 3 13 m3fub
keyboard_arrow_right keyboard_arrow_down Klenvirke 5 m3fub
Sortiment 1 20 m3fub
Sortiment 2 17 m3fub
Sortiment 3 13 m3fub
keyboard_arrow_right keyboard_arrow_down Massaved 5 m3fub
Sortiment 1 20 m3fub
Sortiment 2 17 m3fub
Sortiment 3 13 m3fub
Övrigt 5 m3fub

Programtabell

Beskrivning

...

Exempel

Måndag 3 september
08.00 - 09.00

Eventet öppnar

09.00 - 09.30

Frukost

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non magni qui excepturi debitis recusandae quibusdam, dolor consectetur, quia aut, tenetur provident quaerat fugiat voluptate! Ducimus fugit, dolor repudiandae qui iste?

09.30 - 10.30

Demonstration av X

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores deleniti ad officia iusto! Neque debitis porro deserunt harum unde iure id ipsam obcaecati, aliquam repellat tempora, pariatur laudantium labore laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores deleniti ad officia iusto! Neque debitis porro deserunt harum unde iure id ipsam obcaecati, aliquam repellat tempora, pariatur laudantium labore laborum.

Måndag 3 september
08.00 - 09.00

Eventet öppnar

09.00 - 09.30

Frukost

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non magni qui excepturi debitis recusandae quibusdam, dolor consectetur, quia aut, tenetur provident quaerat fugiat voluptate! Ducimus fugit, dolor repudiandae qui iste?

09.30 - 10.30

Demonstration av X

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores deleniti ad officia iusto! Neque debitis porro deserunt harum unde iure id ipsam obcaecati, aliquam repellat tempora, pariatur laudantium labore laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores deleniti ad officia iusto! Neque debitis porro deserunt harum unde iure id ipsam obcaecati, aliquam repellat tempora, pariatur laudantium labore laborum.

Key/Value-tabell

Beskrivning

Exempel

Namn Kalle Karlsson
Telefon 0470-123 456
Epost info@sodra.com
Namn Kalle Karlsson
Telefon 0470-123 456
Epost info@sodra.com

Key/Value-tabell fullbredd

Passar bra till att visa ne lista på saker som har en lite längre beskrivning.

Exempel