Grokking CSS Design Patterns to Ace Interviews/

...

/

Solution: Adaptive Data Table

Solution: Adaptive Data Table

Let’s create a responsive data table that morphs from a traditional table to a grid card layout and then to a stacked flex format using CSS Container Queries.

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 display: table with grid-template-columns ...