[nick2price]

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

[Atli]

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

[nick2price]

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.

[Atli]

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.