Is there any better way to show Normal table layout in the Desktop views and easy to use view of the same in Mobile?

In an environment that the table columns and rows can be multiple number of rows and columns.

I checked the solutions in this link: https://css-tricks.com/accessible-simple-responsive-tables/

But the solutions given in this is bit confusing in mobile as it doesn't have the table header mapping in card view

Sample table view on Desktop view

  • By card view do you mean the examples in the link provided that are called collapse by rows and collapse by columns? Feb 20, 2019 at 9:43
  • Whats the data? Feb 20, 2019 at 14:52
  • 1
    Possible solution I am getting into my mind is converting this table layout into card view. Same as shown in the CSS Tricks example. But it will confuse the user when it comes to figuring out the type of the data (Column type) @AntonMircea
    – Janindu
    Feb 20, 2019 at 16:21
  • 1
    @Janindu Unfortunately, usually if you are asking generic question you will get generic answer which you can't use in your particular case. The link in your question provides four solutions and all of them are useful depending on context, i.e. data need to be presented and actions to do with this data. Please, make your question more specific to obtain useful answer.
    – Serg
    Feb 27, 2019 at 16:14
  • 4
    Possible duplicate of What is the best practice for displaying a data grid on a mobile device?
    – exp
    Mar 19, 2019 at 11:10

1 Answer 1


As already mentioned you can convert a table row into a card. But each card needs to contain column names as labels next to the values.

If you want to have a more condensed version, you could also use expandable rows. E.g. only display first cols and have a expand action to show other data

This site is temporarily in read-only mode and not accepting new answers.

Not the answer you're looking for? Browse other questions tagged .