TablesLesson 162Free preview

Responsive Tables

This lesson is part of How To · All levels

Summary

This lesson discusses the strategy of displaying a wide table on a small screen. The simplest way is to give the wrapper a horizontal roll. For a more convenient experience, tables can be converted into a list of cards with column labels on a particular query media.

Key points

Wrap the table with overflow-x: auto so that it can be rotated horizontally
Give the table a min-width so that the column is not too narrow before scrolling is active
Use the query media to convert the table into a card layout with the label of the data-labels
Include a meta viewport so that the width of the page is the same as the size of the device

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.