TablesLesson 159Free preview

Full-width Table

This lesson is part of How To · All levels

Summary

This lesson discusses how to make tables fill the entire width of the container. With a width of 100%, the table will adjust to the space available, but the column can become too narrow if it is long. Therefore, table-layout arrangements and overflow handling should be considered.

Key points

Width: 100% making the table fill the width of the parent container
Table-layout: fixed dividing the width of columns more predictably
Use overflow-x: auto on the wrapper so that the width table remains accessible on the small screen
Border-collapse: collapse repairs the double border and helps to display the full table

Full lesson

Code examples and quizzes

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