Is data table better or a card?

Question

in a mobile responsive website is using a table with 9 columns a better idea or a card would suffice? I have tried using a compact table to make it responsive for mobile but. it just didn't work.

Answer 1

You can use one of the next solutions:

• Card-based layout: Organize the information into cards that stack vertically on mobile screens. Each card can represent a single row of data, with the relevant information arranged in a more mobile-friendly manner. This approach can make the content more easily readable and accessible on smaller screens.

• Responsive table with horizontal scrolling: If it's essential to keep the table format, you can implement a responsive table with horizontal scrolling for mobile devices. Users can scroll horizontally to view all columns, but this approach may not provide the best user experience, as horizontal scrolling can be less intuitive and more cumbersome.

• Priority-based columns: Determine the most critical columns and display only those on mobile devices, hiding less important ones. You can use the "priority" attribute in your HTML to designate which columns should be visible at different screen sizes. This approach can help maintain a cleaner layout on mobile screens while still providing essential information.

• Use tabs or accordions: Organize the data into tabs or accordion sections, breaking the information into smaller, more digestible pieces. Users can navigate between tabs or expand accordion sections to access the relevant data.

Below you can find some examples.