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.

Answer 1

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);
}