I am interested in what the best practice is to pack a table from web (desktop size) to mobile.
I got the table done on desktop, but need to pack it on mobile. I understand that something should be fixed, whether the top with Roles, or left side with Stages.
There are 11 stages, and 4 roles.
I need to pack it to a 320px wide artboard with 16px margins. The table is pretty tall so that is the issue.
The natural orientation of a smartphone is portrait, and the natural scroll direction is down, creating a view which is very narrow compared to its possible length. If your table doesn't fit, you could consider either
nudging the user to rotate their device to landscape, so that you have more width to work with
switch the orientation of your table (roles on the vertical axis, and stages on the horizontal axis) and indicate they have to scroll horizontally
Another idea would be not to use a matrix, but present every stage as 'cards'. That way, you do lose the benefit of seeing what is required for a specific role throughout the project. It would look something like this:
I agree with @glorfindel's answer. Ideally, you need to know how your users want to see the information and then turn either the cells of every column or the cells of one row into something that looks more like a card or even an accordion if that meets user needs.
I try to go with cards if possible. You can usually lay out the info with clear hierarchy to help users digest info in a logical way, and sometimes it is possible to omit column labels for certain information. In some instances it isn't feasible and I agree trying to prompt user to flip to landscape so you have more horizontal room for columns. You may also consider flipping axes on the grid (make rows columns and columns rows if it allows you to present the data in a more user friendly manner. The other issue you may run into with a grid on mobile is the need for both horizontal and vertical scrolling which isn't great. Also consider frozen columns – grids are useful because they allow the user to compare one data point across many rows easily; if this is the main goal of your grid and you can determine what column(s) are most used for this comparison, then it will determine if you should freeze a column and make other info visible with the secondary action (like scrolling horizontally).
Use the HTML5 table with bootstrap will will look your table good...as far as the height goes.. give height to your table ..and give css rule as overflow auto which will apply a vertical scroll bar ... The table will be responsive in mobile view also... You may be using some media queries for it...
fliplooks convincing enough.