Responsywne tabele

https://css-tricks.com/accessible-simple-responsive-tables/

Approaches for Responsive Tables

Let’s think about the different ways a table could behave responsively:

Squash: If columns have little content they might squash horizontally with no issues on a mobile screen so not changing the layout needs to be a valid option.
Vertical scroll: If the layout and content is exact and critical, a user could scroll to the left or right. This is trivial in CSS with an overflow=”auto” wrapper.
Collapse by rows: Split each row into its own single column mini-table on small screens. Switching display:table into display:block will cause this with normal table markup.
Collapse by columns: This is where things get tricky. You can’t do this with normal table markup in pure CSS because the code order is by rows and the
wrappers lock it in. We either have to change the markup or start manipulating with JavaScript.

Reklamy

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Wyloguj / Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Wyloguj / Zmień )

Facebook photo

Komentujesz korzystając z konta Facebook. Wyloguj / Zmień )

Google+ photo

Komentujesz korzystając z konta Google+. Wyloguj / Zmień )

Connecting to %s