I have a single webpage with a html table, which I would like to make mobile friendly. This should be accomplished by modifying the accompanying CSS file.
The current layout is
head1 head2 head3 ....
A1 A2 A3 ....
B1 B2 B3
The goal is to modify the CSS such that on small screens, the layout switches to:
The resulting CSS file should not contain the table headers.
Attached are the following files:
[login to view URL]: the page which should be displayed, both in regular and mobile view.
[login to view URL]: jinja2 template from which the page is created
[login to view URL]: CSS file for the regular view table
The solution should not contain a reference to a CSS file which has to be downloaded from an external site.
Ideally, the solution should build on the example on [login to view URL] for a responsive table.
My guess is that a skilled CSS developer should not have more than 30 minutes to 1 hour on this.