Table and data grid patterns in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

Responsive Table Layout with Tailwind CSS

Which option correctly creates a responsive table that scrolls horizontally on small screens using Tailwind CSS?

A <div class="overflow-x-auto"><table class="min-w-full border-collapse border border-gray-300"><thead><tr><th class="border border-gray-300 p-2">Name</th><th class="border border-gray-300 p-2">Age</th><th class="border border-gray-300 p-2">City</th></tr></thead><tbody><tr><td class="border border-gray-300 p-2">Alice</td><td class="border border-gray-300 p-2">30</td><td class="border border-gray-300 p-2">New York</td></tr><tr><td class="border border-gray-300 p-2">Bob</td><td class="border border-gray-300 p-2">25</td><td class="border border-gray-300 p-2">Chicago</td></tr></tbody></table></div>

B <div class="overflow-x-scroll"><table class="min-w-full border-collapse border border-gray-300"><thead><tr><th class="border border-gray-300 p-2">Name</th><th class="border border-gray-300 p-2">Age</th><th class="border border-gray-300 p-2">City</th></tr></thead><tbody><tr><td class="border border-gray-300 p-2">Alice</td><td class="border border-gray-300 p-2">30</td><td class="border border-gray-300 p-2">New York</td></tr><tr><td class="border border-gray-300 p-2">Bob</td><td class="border border-gray-300 p-2">25</td><td class="border border-gray-300 p-2">Chicago</td></tr></tbody></table></div>

C <div class="overflow-auto"><table class="w-full border-collapse border border-gray-300"><thead><tr><th class="border border-gray-300 p-2">Name</th><th class="border border-gray-300 p-2">Age</th><th class="border border-gray-300 p-2">City</th></tr></thead><tbody><tr><td class="border border-gray-300 p-2">Alice</td><td class="border border-gray-300 p-2">30</td><td class="border border-gray-300 p-2">New York</td></tr><tr><td class="border border-gray-300 p-2">Bob</td><td class="border border-gray-300 p-2">25</td><td class="border border-gray-300 p-2">Chicago</td></tr></tbody></table></div>

D <table class="min-w-full overflow-x-auto border-collapse border border-gray-300"><thead><tr><th class="border border-gray-300 p-2">Name</th><th class="border border-gray-300 p-2">Age</th><th class="border border-gray-300 p-2">City</th></tr></thead><tbody><tr><td class="border border-gray-300 p-2">Alice</td><td class="border border-gray-300 p-2">30</td><td class="border border-gray-300 p-2">New York</td></tr><tr><td class="border border-gray-300 p-2">Bob</td><td class="border border-gray-300 p-2">25</td><td class="border border-gray-300 p-2">Chicago</td></tr></tbody></table>

💡 Hint

Wrap the table in a container that allows horizontal scrolling on small screens.

Option A uses overflow-x-auto on a wrapping div, which enables horizontal scrolling if the table is wider than the viewport. The table uses min-w-full to ensure it can grow beyond the container width if needed. This is the recommended pattern for responsive tables with Tailwind CSS.

Option A incorrectly applies overflow-x-auto directly on the table, which does not work as expected because tables do not scroll horizontally themselves.

Option A uses overflow-auto which allows vertical and horizontal scrolling, but w-full forces the table to fit container width, preventing horizontal scroll.

Option A uses overflow-x-scroll which forces a scrollbar always visible, which is less user-friendly than overflow-x-auto.

❓ selector

intermediate

Tailwind CSS Selector for Zebra Striping Table Rows

Which Tailwind CSS utility class correctly applies zebra striping (alternating row background colors) to table rows?

A Use <code>first:bg-gray-100</code> on <code>&lt;tr&gt;</code> elements

B Use <code>even:bg-gray-100</code> on <code>&lt;tbody&gt;</code> element

C Use <code>odd:bg-gray-100</code> on <code>&lt;tr&gt;</code> elements

D Use <code>last:bg-gray-100</code> on <code>&lt;tbody&gt;</code> element

💡 Hint

Zebra striping changes background color on alternating rows, starting with odd or even rows.

Option C is correct because Tailwind provides odd: and even: variants that apply styles to odd or even child elements respectively. Applying odd:bg-gray-100 on each <tr> colors every odd row with a light gray background, creating zebra striping.

Option C is incorrect because even:bg-gray-100 on <tbody> does not affect child rows individually.

Options C and D apply styles only to the first or last row, which is not zebra striping.

🧠 Conceptual

advanced

Accessibility in Data Tables

Which practice improves accessibility for screen reader users when using tables in Tailwind CSS?

A Use <code>div</code> elements with Tailwind classes instead of <code>table</code> elements

B Add <code>aria-hidden="true"</code> to all table cells

C Use <code>border-collapse: separate</code> to separate cells visually

D Add <code>scope="col"</code> to all <code>&lt;th&gt;</code> elements in the table header

💡 Hint

Screen readers rely on semantic markup to understand table structure.

Option D is correct because adding scope="col" to <th> elements helps screen readers identify column headers, improving navigation and understanding of table data.

Option D is incorrect because replacing semantic table elements with divs removes important semantic meaning, harming accessibility.

Option D hides table cells from screen readers, which is harmful.

Option D affects visual style only and does not improve accessibility.

❓ layout

advanced

Fixed Header with Scrollable Table Body Using Tailwind CSS

Which option correctly creates a table with a fixed header and a scrollable body using Tailwind CSS?

A <div class="overflow-y-auto max-h-48"><table class="min-w-full border-collapse border border-gray-300"><thead class="sticky top-0 bg-white"><tr><th class="border border-gray-300 p-2">Name</th><th class="border border-gray-300 p-2">Age</th></tr></thead><tbody><tr><td class="border border-gray-300 p-2">Alice</td><td class="border border-gray-300 p-2">30</td></tr><tr><td class="border border-gray-300 p-2">Bob</td><td class="border border-gray-300 p-2">25</td></tr><tr><td class="border border-gray-300 p-2">Carol</td><td class="border border-gray-300 p-2">28</td></tr></tbody></table></div>

B <table class="min-w-full border-collapse border border-gray-300"><thead class="fixed top-0 bg-white"><tr><th class="border border-gray-300 p-2">Name</th><th class="border border-gray-300 p-2">Age</th></tr></thead><tbody class="overflow-y-auto max-h-48"><tr><td class="border border-gray-300 p-2">Alice</td><td class="border border-gray-300 p-2">30</td></tr><tr><td class="border border-gray-300 p-2">Bob</td><td class="border border-gray-300 p-2">25</td></tr><tr><td class="border border-gray-300 p-2">Carol</td><td class="border border-gray-300 p-2">28</td></tr></tbody></table>

C <div class="overflow-y-scroll max-h-48"><table class="min-w-full border-collapse border border-gray-300"><thead class="sticky top-0 bg-gray-100"><tr><th class="border border-gray-300 p-2">Name</th><th class="border border-gray-300 p-2">Age</th></tr></thead><tbody><tr><td class="border border-gray-300 p-2">Alice</td><td class="border border-gray-300 p-2">30</td></tr><tr><td class="border border-gray-300 p-2">Bob</td><td class="border border-gray-300 p-2">25</td></tr><tr><td class="border border-gray-300 p-2">Carol</td><td class="border border-gray-300 p-2">28</td></tr></tbody></table></div>

D <div class="overflow-auto max-h-48"><table class="min-w-full border-collapse border border-gray-300"><thead><tr><th class="border border-gray-300 p-2">Name</th><th class="border border-gray-300 p-2">Age</th></tr></thead><tbody><tr><td class="border border-gray-300 p-2">Alice</td><td class="border border-gray-300 p-2">30</td></tr><tr><td class="border border-gray-300 p-2">Bob</td><td class="border border-gray-300 p-2">25</td></tr><tr><td class="border border-gray-300 p-2">Carol</td><td class="border border-gray-300 p-2">28</td></tr></tbody></table></div>

💡 Hint

Use a container with fixed height and overflow, and make the header sticky with top positioning.

Option A correctly wraps the table in a div with overflow-y-auto and a max height to enable vertical scrolling. The <thead> uses sticky top-0 and a background color to fix the header at the top while scrolling.

Option A incorrectly applies fixed to <thead> and overflow to <tbody>, which does not work as expected.

Option A is close but uses overflow-y-scroll which always shows scrollbar and a different background color, less ideal.

Option A does not make the header sticky, so it scrolls away.

📝 Syntax

expert

Tailwind CSS Class for Accessible Sortable Table Headers

You want to add an accessible sortable column header using Tailwind CSS. Which option correctly includes the necessary ARIA attribute and visual indicator?

A <th scope="col" aria-sort="ascending" class="cursor-pointer">Name <span aria-hidden="false">▲</span></th>

B <th scope="col" aria-sort="ascending" class="cursor-pointer select-none">Name <span aria-hidden="true">▲</span></th>

C <th scope="col" aria-sort="descending" class="cursor-default">Name <span aria-hidden="false">▼</span></th>

D <th scope="col" aria-sort="true" class="cursor-pointer">Name <span>▲</span></th>

💡 Hint

ARIA attribute aria-sort accepts specific values and visual indicators should be hidden from screen readers.

Option B is correct because aria-sort="ascending" is a valid ARIA attribute value indicating the column is sorted ascending. The span with the arrow uses aria-hidden="true" so screen readers ignore the visual arrow, avoiding redundancy.

Option B uses invalid aria-sort="true" which is not a valid value.

Option B uses aria-hidden="false" on the arrow, which exposes the arrow to screen readers unnecessarily, and cursor-default does not indicate interactivity.

Option B exposes the arrow to screen readers with aria-hidden="false", which is not recommended.

Practice

1. What is the main purpose of using tables in web pages with Tailwind CSS?

easy

A. To create animations and transitions

B. To add background images to the page

C. To organize data in rows and columns for easy reading

D. To handle user input forms

Solution

1. Step 1: Understand the role of tables

   Tables are designed to display data in a structured way using rows and columns.

2. Step 2: Recognize Tailwind CSS usage

   Tailwind CSS helps style these tables but does not change their purpose.

3. Final Answer:

   To organize data in rows and columns for easy reading -> Option C

4. Quick Check:

   Tables = organize data [OK]

Hint: Tables show data in rows and columns [OK]

Common Mistakes:

• Confusing tables with animations
• Thinking tables handle user input
• Assuming tables add images

2. Which Tailwind CSS class adds a border around table cells?

easy

A. border-collapse

B. text-center

C. table-auto

D. border

Solution

1. Step 1: Identify border classes

   The class border adds a border to elements, including table cells.

2. Step 2: Differentiate from other classes

   border-collapse controls border merging, table-auto sets table layout, and text-center aligns text.

3. Final Answer:

   border -> Option D

4. Quick Check:

   Border around cells = border [OK]

Hint: Use 'border' class for cell borders [OK]

Common Mistakes:

• Using border-collapse instead of border
• Confusing layout classes with border
• Using text alignment classes for borders

3. What will be the visual effect of this Tailwind CSS snippet on a table?

<div class="overflow-x-auto">
  <table class="min-w-full border border-gray-300">
    <thead>
      <tr><th class="border p-2">Name</th><th class="border p-2">Age</th></tr>
    </thead>
    <tbody>
      <tr><td class="border p-2">Alice</td><td class="border p-2">30</td></tr>
    </tbody>
  </table>
</div>

medium

A. A full-width table with borders and horizontal scroll on small screens

B. A table without borders and no scrolling

C. A table with vertical scrolling only

D. A table with no padding inside cells

Solution

1. Step 1: Analyze container class

   The overflow-x-auto on the div allows horizontal scrolling if the table is wider than the screen.

2. Step 2: Analyze table and cell classes

   The table has min-w-full making it at least full width, and border classes add visible borders. Padding p-2 adds space inside cells.

3. Final Answer:

   A full-width table with borders and horizontal scroll on small screens -> Option A

4. Quick Check:

   overflow-x-auto + border = scroll + borders [OK]

Hint: overflow-x-auto enables horizontal scroll [OK]

Common Mistakes:

• Ignoring overflow-x-auto effect
• Confusing vertical and horizontal scroll
• Missing that borders are added by border class

4. Identify the error in this Tailwind CSS table code snippet:

<table class="table-auto border-collapse border border-gray-400">
  <thead>
    <tr>
      <th class="border p-4">ID</th>
      <th class="border p-4">Score</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border p-4">1</td>
      <td class="border p-4">85</td>
    </tr>
  </tbody>
</table>

medium

A. Missing overflow-x-auto on the table container

B. Using both border-collapse and border on the table causes double borders

C. Padding p-4 is too small for table cells

D. Table tag is missing a closing tag

Solution

1. Step 1: Understand border-collapse effect

   The border-collapse class merges adjacent borders into one, but adding border on the table itself can cause unexpected double borders.

2. Step 2: Check other options

   Overflow-x-auto is optional, padding p-4 is reasonable, and the table tag is properly closed.

3. Final Answer:

   Using both border-collapse and border on the table causes double borders -> Option B

4. Quick Check:

   border-collapse + border on table = double borders [OK]

Hint: Avoid border on table with border-collapse [OK]

Common Mistakes:

• Thinking overflow-x-auto is required always
• Assuming p-4 is too small
• Missing that table tag is closed

5. You want to create a responsive data grid with Tailwind CSS that: - Has a fixed header row - Allows horizontal scrolling on small screens - Uses alternating row colors for readability Which combination of Tailwind classes and structure should you use?

hard

A. <div class="overflow-x-auto max-h-64"><table class="min-w-full border-collapse border border-gray-300"><thead class="sticky top-0 bg-white">...</thead><tbody class="divide-y divide-gray-200">...</tbody></table></div>

B. <table class="table-fixed border border-gray-400"><thead>...</thead><tbody>...</tbody></table>

C. <div class="overflow-y-auto"><table class="min-w-full border border-gray-300"><thead>...</thead><tbody>...</tbody></table></div>

D. <div class="overflow-x-auto"><table class="min-w-full border border-gray-300"><thead>...</thead><tbody><tr class="bg-gray-100">...</tr></tbody></table></div>

Solution

1. Step 1: Enable horizontal scrolling and fixed header

   The overflow-x-auto on the container allows horizontal scroll. The sticky top-0 on thead fixes the header row on scroll.

2. Step 2: Add alternating row colors

   The divide-y divide-gray-200 on tbody creates visible row separators for readability.

3. Step 3: Confirm other classes

   min-w-full ensures full width, and border-collapse merges borders nicely.

4. Final Answer:

   Option A code snippet with overflow-x-auto, sticky header, and divide-y -> Option A

5. Quick Check:

   Sticky header + scroll + row divide = <div class="overflow-x-auto max-h-64"><table class="min-w-full border-collapse border border-gray-300"><thead class="sticky top-0 bg-white">...</thead><tbody class="divide-y divide-gray-200">...</tbody></table></div> [OK]

Hint: Use sticky thead and overflow-x-auto container [OK]

Common Mistakes:

• Missing sticky class for fixed header
• Using overflow-y-auto instead of overflow-x-auto
• Not adding row dividers for readability