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

  • By card view do you mean the examples in the link provided that are called collapse by rows and collapse by columns? – Anton Mircea Feb 20 at 9:43
  • Whats the data? – ADOConnection Feb 20 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 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 at 16:14
  • 4
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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