Инвертировать горизонтальную таблицу html в вертикальную

Question

У меня есть таблица html, которую я не могу коснуться, и я пытаюсь как-то повернуть ее с помощью CSS или JS (или jquery). В основном это просто таблица, как в:

<table> 
<thead> 
<tr><th>header1</th><th>header2</th></tr> 
</thead> 
<tbody> 
<tr><td>content1</td><td>content2</td></tr> 
<tbody> 
</table> 

я должен был бы эту таблицу, чтобы быть повернута так, что он показывает

header 1 content 1 
header 2 content 2 

Я пытался сделать это в этом jsfiddle (http://jsfiddle.net/Hskke/136/), но по какой-то причине код, который я играл (отсюда: https://stackoverflow.com/a/6297892) не работает. Любые идеи, что я пытаюсь сделать неправильно?

Мой jsfiddle также содержит исходный HTML-код, так что есть некоторые дополнительные данные ..

Answer 1

Мы можем сделать что-то вроде этого

var x = $("#walls_settings_timers").find("th,td"); 

var i = $("#walls_settings_timers").find("tr").length; 

var j = x.length/i; 
console.log(i , j); 
var newT= $("<table>").appendTo("body"); 
for (j1=0; j1<j;j1++){ 
    var temp = $("<tr>").appendTo(newT); 
    for(var i1=0;i1<i; i1++){ 
     temp.append($(x[i1*j+j1]).clone()); 
    } 

} 

ЗАКАНЧИВАТЬ jsFiddle здесь