I am building a web page that's part of a contacts system. The page enables the user to search for a contact and after finding a contact they can view and edit that contacts details in the web page.
The page consists of a number of tables that I want to control using HTML 5 and CSS 3. In full screen mode (e.g. on a desktop machine) there are up to 4 tables across the page. I need the page to convert to a single, narrow column of tables when the screen width gets narrower (e.g. when on a mobile phone).
I've attached 2 screen shots. The first shows the page in full screen mode:
The other shows how I want the page to convert when it goes into narrow mode:
Please let me know what I can do to get the page working in that way.
I've already played around with this problem in different ways. Initially I tried using lists, but found that I couldn't combine tables with lists, because they don't seem to display correctly in that set up.
I've also tried using <section>, <article> and <aside> but found it difficult to control the widths of things (tables) when using these. Also, it seems difficult to use these components when I have 3 or 4 tables spread across the page and I want/need to convert those into a single column of tables with only one table per row in that column.
It currently seems to me as though HTML 5 and CSS 3 just aren't set up to deal with this kind of scenario. I hope someone out there can prove me wrong and point me in the right direction, so that I can resolve this problem. Thanks in advance for your time.
