Collapse table columns into rows

Question

How to collapse html table columns into rows? Lets say i have a html table like this

Hello|World
One|Two|Three

and i want all columns to collapsed into row for responsive. Can it be done with CSS?

Hello
World
One
Two
Three

Basically the fiddle from [this answer](http://stackoverflow.com/a/13861083/1326147) does what you want: http://jsfiddle.net/RnmLF/1/ — Armfoot, Oct 05 '15 at 14:05

score 3 · Accepted Answer · edited Oct 05 '15 at 14:13

You need to change from float to display block in your media queries.

@media (max-width: 400px) {
td { 
    float:none; 
    display:block; 
} 
}

Obviously, change your max-width to whatever you like.

You are basically telling you CSS that when the page is being displayed at a certain resolution, in this case 400px, then change the attributes from td to float:none, and display:block;

Hope this helps :)

Collapse table columns into rows

1 Answers1