I have a table of this type: Table

So I need to make it responsive, look good on mobile devices. Several notices about table:
1) Yeah, there definitely should be some tips for every text field, it's pretty important. "Tips" - maybe these labels in the header, or something that describes inputs ("Card number", "Chip number");
2) Yeah, button "Save" should be in front of every row, that's necessary;
3) That icon on the left side has destiny too - it may be visible for some row and invisible for other rows;

Of course, the first what came to my head, was something like accordion with this look-like content: enter image description here
But if there are a lot of rows (the average count should be like 20), It's gonna be a little tough to click for each of them to collapse, then to save. So what I ask is help making this table be responsive.
Moreover first input should content around 19 digits, so it has to be pretty wide, so that user could see value.

  • According to the mockup, each row has a Save button which means they can be treated as separate forms and do not need to remain open simultaneously. It will be chaos to keep all rows inputs active and scroll through them on a phone. I suggest, using an Edit icon on each row to open the form when needed, otherwise leave it as Read-only. – Ren Aug 26 '19 at 6:32
  • In both designs, is there a reason why you don't have a sticky button to save as the user is scrolling down and inputting potentially multiple rows at once? The way that this is done is implying that with each row, they have to save individually which becomes cumbersome. – Majo0od Feb 3 at 15:19

Using an accordion style seems sensible. Is having each one collapsed on page load and then the user can open the ones they want to view/amend/save.

|improve this answer|||||

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.