Rotate an html table 90 degrees in the anticlockwise direction

Question

I want to rotate the entire table 90 degrees in the anticlockwise direction. ie. contents of td(row=ith,column=jth) should be transferred to the td(row = (total number of rows-j+1)th , column = ith). The text inside the div also should be rotated by 90degrees.

<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 transformed 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 by javascript loops. But its very long. I want to know whether there is a more elegant way. Thanks in advance.

http://stackoverflow.com/questions/2730699/convert-td-columns-into-tr-rows, http://stackoverflow.com/questions/6297591/how-to-invert-the-rows-and-columns-of-an-html-table — Andreas, Aug 30 '13 at 12:53
@Alberto . generated from an array [[a,1,8],[b,2,9]....]. entire thing is a part of an addon. — Serjical Kafka, Aug 30 '13 at 13:02
"I can do this by javascript loops. But its very long. " It really isn't — Popnoodles, May 02 '16 at 18:41

score 9 · Accepted Answer · answered Aug 30 '13 at 13:34

9

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

So basically you just want the whole thing to be rotated as a block?

Maybe you should just use CSS?

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

answered Aug 30 '13 at 13:34

Spudley

166,037
39
233
307

Rotating the whole table you lose control on the position of the table itself (http://jsfiddle.net/n55XV/). I think it is better to rearrange table rows and cols and then rotate td(s). – Alberto Aug 30 '13 at 14:15
@Alberto: You'll have the same problem if you rotate just the cells. See http://jsfiddle.net/n55XV/1/. Did you try it? (I've made the words longer to demonstrate the effect a bit better) You can use `transform-origin` and other tricks to work around it, but it's a lot easier to work with just a single element (ie the table) rather than dozens of individual cells. – Spudley Aug 30 '13 at 14:24
awesome, exactly what i needed. thumbs-up. [+1] – kapitan Jan 07 '21 at 02:07
Then, it can go partally off screen though – Petr L. May 27 '23 at 16:57

score 2 · Answer 2 · answered Aug 30 '13 at 13:37

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

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

PRO: easy

CONS: duplicated 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();
})

score 1 · Answer 3 · edited May 23 '17 at 12:14

try this DEMO

reference : Convert TD columns into TR rows and modified 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 per Robbert suggestion 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;
}

thanks man . What about rotating the text? Do you think a common code for both is possible? ie. rotate the table and the td innertext by 'x' degrees.? — Serjical Kafka, Aug 30 '13 at 13:25
This might help: http://stackoverflow.com/questions/15806925/how-to-rotate-text-left-90-degree-and-cell-size-is-adjusted-according-to-text-in — Robbert, Aug 30 '13 at 13:31

Rotate an html table 90 degrees in the anticlockwise direction

3 Answers3