Search⌘ K
Home
Courses
Grokking CSS Design Patterns to Ace Interviews

Adaptive Data Table

Explore responsive design techniques to build an adaptive data table with CSS. Learn how to use container queries and intrinsic grid sizing to switch layouts between table, grid, and flex based on viewport size. This lesson helps you understand practical methods for managing complex data layouts that adjust smoothly without JavaScript, improving your skills in responsive CSS patterns.

We'll cover the following...

Problem description

You have a <div class="table-wrapper"> containing a <table> with <thead> and <tbody> rows and cells. Write CSS so that:

  1. .table-wrapper declares container-type: inline-size.

  2. Large (≥800px): The <table> uses ...