Skip to content
Forge

Table that turns into cards on mobile

A real table on large screens whose rows each become a readable card on mobile, with no horizontal scrolling and no JavaScript.

  • Tailwind
  • React
  • CSS
  • WordPress
Open in a new tab

Description

Below 640 pixels, headers are visually hidden but still read by screen readers, and every cell shows its column name through the data-label attribute. Availability is shown with a badge, including « Complet » (full).

Code

Loading the code…

Archive contents

tableau-cartes-mobile-html-tailwind.zip3 files · 4 Ko

  • index.html14 Ko
  • README.md2 Ko
  • LICENSE.md1 Ko

Tags

Updated on October 13, 2026.

In the same spirit

  • Sortable table

    Free

    A data table where every column sorts with a click, ascending or descending, with no library.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Video testimonial with transcript

    Free

    A CSS-drawn video poster with a play button, the testimonial's key quote, its author, and the timestamped transcript in a collapsible panel.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Animated counters

    Free

    Four key figures in cards that count up from zero to their value when the section scrolls into view, with icon, unit and label.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Page table of contents

    Free

    A table of contents that follows the reader through a long article and highlights the current section.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component