craig-c Posted June 23, 2014 Share Posted June 23, 2014 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now