I need to make it responsive so it looks good on mobile devices. Some requirements for the table:
- There should be tips/hints for each text field. "Tips" - maybe these are labels in the header, or something that describes the inputs in more detail ("Card number", "Chip number");
- A "Save" button should be in every row;
- The icon on the left side may be visible for some rows and invisible for other rows;
- The first field should accept approx. 19 digits and show the entire value.
The first idea I had was to use an accordion for each row with this design:
But if there are a lot of rows (the average count would be about 20), and it's going to be a little tough to click each of them to collapse, then to save. How might I make this table be responsive?