Responsive Table Issue

[jamesthemonkeh]

Hello

I’ve used Drupal to set up a site but I’m having problems with my table when on mobile as I cannot get the columns to behave like rows.

I thought something like the below within a media query would make it responsive but apparently not:

table, thead, tbody, th, td, tr { 
	display: block; 
		}

td { 
	position: relative;
	min-width: 100%;
}

Can anyone help/advise?

http://www.ubereadoolische.com/drupal3/

Thanks
James

[SamA74]

There is an example here which may help.

[jamesthemonkeh]

Thanks for your response. I did a quick copy and paste onto the end of the main CSS file, and apart from changing the background to white, it hasn’t changed the layout as required

[jamesthemonkeh]

Actually this has helped a lot, thanks - I just needed to sort out some floats that were over-riding it.

Have a good evening.
James

[PaulOB]

If you are supporting ie9 then you will also need to float the tr,td and th with a 100% width in order for them to collapse properly.

float:left;/* ie9 and under hack */
	width:100%;

Note that is would also be good to ensure that border-spacing is set back to zero (if you are using it) because some browsers still hang on to it even when you set the table back to display:block.