Tables overflow on mobile

Created on 18 July 2019, about 6 years ago
Updated 14 June 2025, about 2 months ago

Problem/motivation

Currently there is a overflow/scrollbar for the entire page, if the page is viewed on a mobile device and the page contains a table. Even with the responsive tables feature.

A CSS-only approach will not work. When scrolling horizontally, sticky headers will not move with the rest of the table. This happens:

Proposal

Instead of hiding columns, display all columns and introduce a mobile-friendly horizontal scroll on large tables.

Currently discussing if we should let claro override the responsive table feature with this new behavior, or introduce a dedicated #scrollable property to all tables to trigger this behavior when necessary. So one could have a responsive table that scrolls if too large.

Feature request
Status

Needs work

Version

11.0 🔥

Component

Claro theme

Created by

🇫🇮Finland lauriii Finland

Live updates comments and jobs are added and updated live.
  • JavaScript

    Affects the content, performance, or handling of Javascript.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024