Rotate the html table 90 degrees counterclockwise

Question

I want to rotate the entire table 90 degrees in a counterclockwise direction. i.e. the contents of td (row = i, column = jth) should be passed to td (row = (total number of rows-j + 1) th, column = i). The text inside the div should also be rotated 90 degrees.

<table><tbody> <tr><td>a</td><td>1</td><td>8</td></tr> <tr><td>b</td><td>2</td><td>9</td></tr> <tr><td>c</td><td>3</td><td>10</td></tr> <tr><td>d</td><td>4</td><td>11</td></tr> <tr><td>e</td><td>5</td><td>12</td></tr> <tr><td>f</td><td>6</td><td>13</td></tr> <tr><td>g</td><td>7</td><td>14</td></tr> </tbody></table> 

this table should be converted to

 <table><tbody> <tr> <td>8</td><td>9</td><td>10</td><td>11</td> <td>12</td><td>13</td><td>14</td> </tr> <tr> <td>1</td><td>2</td><td>3</td><td>4</td> <td>5</td><td>6</td><td>7</td> </tr> <tr> <td>a</td><td>b</td><td>c</td><td>d</td> <td>e</td><td>f</td><td>g</td> </tr> </tbody></table> 

I can do this with javascript loops. But a very long time. I want to know if there is a more elegant way. Thanks in advance.

Answer 1

The text inside the div should also be rotated 90 degrees.

So basically you just want everything to be rotated as a block?

Maybe you should just use CSS?

 #myTable { transform:rotate(270deg); } 

Answer 2

Cheating by creating an already rotated table (trivial since you are generating a table from an array). JS is just to hide / show tables.

Note this: http://jsfiddle.net/nUvgp/

PRO: easy

CONS: duplicate table code

HTML:

 <a href="#" id="rotate">Rotate!</a> <table id='myTable'><tbody> <tr><td>a</td><td>1</td><td>8</td></tr> <tr><td>b</td><td>2</td><td>9</td></tr> <tr><td>c</td><td>3</td><td>10</td></tr> <tr><td>d</td><td>4</td><td>11</td></tr> <tr><td>e</td><td>5</td><td>12</td></tr> <tr><td>f</td><td>6</td><td>13</td></tr> <tr><td>g</td><td>7</td><td>14</td></tr> </tbody></table> <table id='myRotatedTable'><tbody> <tr> <td>8</td><td>9</td><td>10</td><td>11</td> <td>12</td><td>13</td><td>14</td> </tr> <tr> <td>1</td><td>2</td><td>3</td><td>4</td> <td>5</td><td>6</td><td>7</td> </tr> <tr> <td>a</td><td>b</td><td>c</td><td>d</td> <td>e</td><td>f</td><td>g</td> </tr> </tbody></table> 

CSS

 #myRotatedTable { display:none; } #myRotatedTable td { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); writing-mode: lr-tb; } 

JS:

 $('#rotate').click(function (e) { e.preventDefault(); $("#myTable").toggle(); $("#myRotatedTable").toggle(); }) 

Answer 3

try demo

reference: Convert TD columns to TR rows and change david answer

 TransposeTable('myTable'); function TransposeTable(tableId) { var tbl = $('#' + tableId); var tbody = tbl.find('tbody'); //var oldWidth = tbody.find('tr:first td').length; var oldWidth = 0; //calculate column length if there is 'td=span' added $('tr:nth-child(1) td').each(function () { if ($(this).attr('colspan')) { oldWidth += +$(this).attr('colspan'); } else { oldWidth++; } }); var oldHeight = tbody.find('tr').length; var newWidth = oldHeight; var newHeight = oldWidth; var jqOldCells = tbody.find('td'); var newTbody = $("<tbody></tbody>"); for(var y=newHeight; y>=0; y--) { var newRow = $("<tr></tr>"); for(var x=0; x<newWidth; x++) { newRow.append(jqOldCells.eq((oldWidth*x)+y)); } newTbody.append(newRow); } tbl.addClass('rotate'); tbody.replaceWith(newTbody); } 

as suggested by Robbert CSS

 .rotate { -moz-transform: rotate(-90.0deg); /* FF3.5+ */ -o-transform: rotate(-90.0deg); /* Opera 10.5 */ -webkit-transform: rotate(-90.0deg); /* Saf3.1+, Chrome */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */ padding-right:50px; }