3 Replies - 427 Views - Last Post: 19 July 2012 - 07:25 PM

#1 nick2price  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 561
  • View blog
  • Posts: 2,826
  • Joined: 23-November 07

Html Table

Posted 19 July 2012 - 04:51 PM

Hi guys, quick question. I have made a responsive website, and on one page, I have a 2 column table to display data. When I resize the screen to be a mobile size, I want this table to be a single column instead. Is this possible through html and css, or will I have to use javascript and something like getElementById?

Cheers
Is This A Good Question/Topic? 0
  • +

Replies To: Html Table

#2 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3636
  • View blog
  • Posts: 5,759
  • Joined: 08-June 10

Re: Html Table

Posted 19 July 2012 - 06:13 PM

It's possible using CSS media queries, but the support for it is not great in older browsers. You may want to consider a Javascript solution if that is a concern.

I suggest you read this article:
A List Apart: Responsive Web Design
Was This Post Helpful? 1
  • +
  • -

#3 nick2price  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 561
  • View blog
  • Posts: 2,826
  • Joined: 23-November 07

Re: Html Table

Posted 19 July 2012 - 06:26 PM

Kool, the responsive design isnt really the problem as I have all my css media quiries completed and they work well. But on one page, a table of 2 columns is displayed, and on the smaller resolution, it is quite compressed. To handle this, I was hoping I may be able to add some css to one of my media quiries to turn it into a single column table. I have never seen an example of altering a tables properties through css, so I would imagine javascript would be the option I had to choose. I thought I better ask first though as I wanted to try and avoid javascript for this job.
Was This Post Helpful? 0
  • +
  • -

#4 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3636
  • View blog
  • Posts: 5,759
  • Joined: 08-June 10

Re: Html Table

Posted 19 July 2012 - 07:25 PM

You can alter how the table cells behave through CSS. By default the act like table-cells, but though the display style you can change that. If you set them to display: block; in your media query section for the smaller devices, the table cells will no longer line up like a row, but instead stack vertically like normal block level elements.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1