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

Question

I have a table with 3 columns. I would like to convert to single row.

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

Want it like this for mobile friendly page -

Thank you for your help!

http://jsfiddle.net/tZt3Q/

Answer 1

One way you can achieve this is by using JQuery wrap method. See Wrap and UnWrap

Demo

Demo W/O class

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

Much simpler one:

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

Fiddle