Responsive tables in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What does the .table-responsive class do in Bootstrap?

Choose the correct description of the .table-responsive class in Bootstrap.

A It makes the table horizontally scrollable on small screens to prevent overflow.

B It converts the table into a list on small screens.

C It changes the table background color on small screens.

D It automatically hides columns on small screens to fit the table.

💡 Hint

Think about how tables behave on narrow devices and how Bootstrap helps with that.

The .table-responsive class wraps a table and adds horizontal scrolling on small devices. This prevents the table from breaking the layout by overflowing the screen width.

📝 Syntax

intermediate

Which Bootstrap class makes a table responsive only on screens smaller than 768px?

Select the correct Bootstrap class that makes a table responsive only on devices smaller than 768px wide.

A table-responsive-lg

B table-responsive-xl

C table-responsive-md

D table-responsive-sm

💡 Hint

Bootstrap uses size abbreviations like sm, md, lg, xl for breakpoints.

The table-responsive-md class applies horizontal scrolling only on screens smaller than the md breakpoint (768px). Larger screens show the table normally.

❓ rendering

advanced

What will be the visual result of this Bootstrap table code?

Given the following HTML code, what will the user see on a narrow mobile screen?

Bootsrap

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr><th>Name</th><th>Age</th><th>City</th></tr>
    </thead>
    <tbody>
      <tr><td>Alice</td><td>30</td><td>New York</td></tr>
      <tr><td>Bob</td><td>25</td><td>Chicago</td></tr>
    </tbody>
  </table>
</div>

A The table columns will stack vertically, showing each cell on a new line.

B The table will have a horizontal scrollbar allowing side-to-side scrolling.

C The table will be hidden on small screens.

D The table will shrink to fit the screen width without scrolling.

💡 Hint

Remember what the .table-responsive wrapper does on small screens.

The .table-responsive wrapper adds horizontal scrolling on small screens, so the table remains in a row format but can be scrolled sideways.

❓ selector

advanced

Which CSS selector targets only tables inside .table-responsive containers?

Choose the correct CSS selector to style only tables wrapped by .table-responsive in Bootstrap.

A .table-responsive > table

B table.table-responsive

C table > .table-responsive

D .table-responsive table

💡 Hint

Think about how to select a child element inside a container.

The selector .table-responsive table selects any table element inside an element with class table-responsive, regardless of nesting depth.

❓ accessibility

expert

How to improve accessibility for responsive Bootstrap tables?

Which practice best improves accessibility for users navigating responsive tables on small screens?

A Add <code>aria-label</code> to the <code>table</code> describing its content and ensure keyboard scroll support.

B Use only color to indicate important data differences in the table.

C Hide table headers on small screens to save space.

D Disable horizontal scrolling to force table stacking.

💡 Hint

Think about screen readers and keyboard users when tables scroll horizontally.

Adding aria-label helps screen readers understand the table's purpose. Ensuring keyboard users can scroll horizontally is essential for accessibility.