JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<tr>
<td></td>
<td>01/01</td>
<td>01/02</td>
<td>01/03</td>
</tr>
<tr>
<td>pommes</td>
<td>50</td>
<td>40</td>
<td>90</td>
</tr>
<tr>
<td>poires</td>
<td>15</td>
<td>30</td>
<td>25</td>
</tr>
</table>
<p><a href="#">inverse</a></p>
CSS
td { padding:5px; border:1px solid #ccc;}
JavaScript
$("a").click(function(){
$("table").each(function() {
var $this = $(this);
var newrows = [];
$this.find("tr").each(function(){
var i = 0;
$(this).find("td").each(function(){
i++;
if(newrows[i] === undefined) { newrows[i] = $("<tr></tr>"); }
newrows[i].append($(this));
});
});
$this.find("tr").remove();
$.each(newrows, function(){
$this.append(this);
});
});
return false;
});