Convert multiple html table columns to single column for Mobile-friendly layout

Question

I have a table with three columns. I would like to convert to one line.

both append.('</tr><tr>') and after.('</tr><tr>') do not work. 

Want to like this for a mobile page -

Thank you for your help!

http://jsfiddle.net/tZt3Q/

Answer 1

One way to achieve this is to use the jQuery wrapper method. See Wrap and UnWrap

Demo

Demo class W / O

  $(document).ready(function () { var tbl = $("table"); $('td','table').unwrap().each( function () { tbl.append($(this).wrap('<tr>').parent()); }); }); 

Much simpler:

  $(document).ready(function () { $('table').find('td').unwrap().wrap($('<tr/>')); }); 

Fiddle

Answer 2

Try the following:

Single line :

 var $tds = $("table td").clone(); $("table").empty().append($("<tr>").append($tds)); 

http://jsfiddle.net/hescano/tZt3Q/10/

Single column :

 var $tds = $("table td").clone(); $("table").empty(); $tds.each(function(){ $("table").append($("<tr>").append($(this))); }); 

http://jsfiddle.net/hescano/tZt3Q/11/

Answer 3

As a suggestion .. you can use divs as cells instead of a table, and this will happen without using JS with float css:

like this:

http://jsfiddle.net/tZt3Q/9/

HTML:

 <div class="tableDivColumns"> <div>One</div><div>Tow</div><div>Three</div><div>Four</div><div>Five</div><div>six</div> <div>Seven</div><div>Eight</div><div>Nine</div> </div> <div class="tableDivRows"> <div>One</div><div>Tow</div><div>Three</div><div>Four</div><div>Five</div><div>six</div> <div>Seven</div><div>Eight</div><div>Nine</div> </div> 

CSS

 .tableDivColumns {border:1px solid green; padding 5px; width:160px;height:160px;} .tableDivColumns div {border:1px solid blue; width:50px; height:50px;float:left;} .tableDivRows {border:1px solid green; padding 5px; width:60px;height:470px;} .tableDivRows div {border:1px solid blue; width:50px; height:50px;float:left;}