TablesLesson 161Free preview

Side-by-side Tables

This lesson is part of How To · All levels

Summary

This lesson discusses how to place two tables side by side. Modern approaches use flexbox or grid on the wrapping, whereas float is still found on old codes. On a narrow screen, the table should be stacked vertically to remain legible and not force the user to scroll horizontally.

Key points

Wrap both tables in containers and set the display: flex or grid
Use the gap to give the distance between tables without additional margin
Adjust the width of the child's table to balance, for example flex: 1
Add the query media to stack the table vertically on a small screen

Full lesson

Code examples and quizzes

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