html 테이블을 반 시계 방향으로 90도 회전

Question

전체 테이블을 시계 반대 방향으로 90도 회전시키고 싶습니다. 즉. td (row = iith, column = jth)의 내용은 td (row = (총 행 수 -j + 1) th, column = iith)로 전송되어야한다. div 안에있는 텍스트도 90도 회전해야합니다.

<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> 

이 테이블

은 루프 자바 스크립트에 의해

<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> 

나는이 작업을 수행 할 수 있습니다로 변환해야합니다. 그러나 매우 길다. 좀 더 우아한 방법이 있는지 알고 싶습니다. 미리 감사드립니다.

Answer 1

div 안에있는 텍스트도 90도 회전해야합니다.

기본적으로 전체를 블록으로 회전 시키길 원하십니까?

CSS를 사용해야할까요?

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

Answer 2

이 DEMO

참조하십시오 : Convert TD columns into TR rows 및 david 대답

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

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

,

Answer 3

이미 회전 된 테이블을 생성하여 부정 행위를합니다 (배열에서 테이블을 생성하기 때문에 사소한 문제입니다). JS 테이블 숨기기/표시하기.

확인이 : http://jsfiddle.net/nUvgp/

PRO : 쉽게

단점 : 중복 테이블 코드

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