Responsive Table Issue


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?


1 Like

There is an example here which may help.

1 Like

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 :frowning:

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

Have a good evening.

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 */

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.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.