Jump to content

tables/columns in HTML 5


craig-c
 Share

Recommended Posts

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: post-174326-0-53276400-1403535419_thumb.jpg

 

The other shows how I want the page to convert when it goes into narrow mode: post-174326-0-39841100-1403537114_thumb.jpg

 

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...