1

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

Improve this question
9
  • By card view do you mean the examples in the link provided that are called collapse by rows and collapse by columns?
    – Mircea Anton
    Commented Feb 20, 2019 at 9:43
  • Whats the data?
    – ADOConnection
    Commented 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
    Commented 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
    Commented 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
    Commented Mar 19, 2019 at 11:10

1 Answer 1

Reset to default
2

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

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.