CODEWITHSUNDEEP
jqueryresponsive-designhtml-table
Rahul
Rahul

Reputation: 5774

Responsive Tables, combine columns on mobile screen..

I am in a situation where I want to compile three columns and show data in a single column on smaller devices like Mobile..

I have referred many libraries like FooTable() and tried writing custom script but somehow it did not work out that well..

Is there any way to merge more than one column in single column using JQuery or similar approach?

Upvotes: 1

Views: 950

Answers (1)

user3153298
user3153298

Reputation: 187

Making one column out of three is possible without Javascript. Just change the display property for the table, tr, td to something else in the smaller media query. E.g.

table, tr { display: block; }
td { display: inline; 

}

If you want to merge only 2 of 3 columns you can use jQuery. Use a container inside the cells and move it to a different cell if needed and hide the empty one.

Upvotes: 1

Related Questions