내 웹 페이지 에서이 데이터 테이블 을 사용했습니다 . 이것은 내가 코드를 넣은 바이올린 링크입니다. 나는 첫 번째 숫자 두 번째 숫자 열을 세로로 회전해야합니다. 벌써 만들었어요. 그러나 문제는 그것을 만든 후에 열 머리글과 열이 함께 머물 수 없다는 것입니다. 이 외에도 세로 회전 텍스트의 열이 최대한 얇아지기를 바랍니다. 그러나 해당 열의 헤더에 20px 너비를 설정했지만 만들 수 없습니다. 또 다른 점은 IE8에서 회전 된 텍스트의 div가 다르게 보인다는 것입니다 (패딩 / 여백 문제).. 내 질문에 따르면 회전 텍스트를 넣는 데 문제 / 실패에 대해서만 작성해야합니다. 하지만 여기에 여러 문제를 썼습니다. 그 이유는 모든 문제가 열 머리글에 회전 텍스트를 넣은 후에 발생하기 때문입니다 (내 주어진 플러그인의 js도 열 너비를 적절하게 수정하지 못하기 때문에 약간의 책임이 있습니다). 나는 생각 나는 (너무 IE8에 대해 관련된) 적절한 방법으로 수직 회전 된 텍스트를 넣어 수정 테이블의 폭을 적절하게 문제가 더 이상 기존되지 않습니다 수있는 경우 . 그렇다면 세로 회전 텍스트를 열 머리글에 올바르게 배치하려면 어떻게 해야합니까?
일부 코드 :
<table id="example" class="dataTable display" cellspacing="0" width="100%">
<thead>
<tr>
<th class="rank">Rank</th>
<th class="wider">User Inserted Title Name</th>
<th class="rotate">
<div>Fisrt Number Second Number</div>
</th>
<th class="rotate">
<div>Fisrt Number Second Number</div>
</th>
<th class="rotate">
<div>Fisrt Number Second Number</div>
</th>
<th class="rotate">
<div>Fisrt Number Second Number</div>
</th>
<th class="rotate">
<div>Fisrt Number Second Number</div>
</th>
<th class="rotate">
<div>Fisrt Number Second Number</div>
</th>
<th class="rotate">
<div>Fisrt Number Second Number</div>
</th>
<th class="rotate">
<div>Fisrt Number Second Number</div>
</th>
<th class="rotate">
<div>Fisrt Number Second Number</div>
</th>
<th class="rotate">
<div>Fisrt Number Second Number</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>System Architect and Analyser</td>
<td>1</td>
<td>4</td>
<td>6</td>
<td>20</td>
<td>5</td>
<td>1</td>
<td>4</td>
<td>6</td>
<td>20</td>
<td>5</td>
</tr>
<tr>
<td>2</td>
<td>Accountant</td>
<td>4</td>
<td>13</td>
<td>7</td>
<td>11</td>
<td>8</td>
<td>1</td>
<td>4</td>
<td>6</td>
<td>20</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>Junior Technical Author</td>
<td>5</td>
<td>26</td>
<td>9</td>
<td>3</td>
<td>19</td>
<td>1</td>
<td>4</td>
<td>6</td>
<td>20</td>
<td>5</td>
</tr>
</tbody>
</table>테이블 헤더가 아닌 div 만 회전합니다. 각 th줄은 다음과 같아야합니다.<th ><div class="rotate">Fisrt Number Second Number</div></th>
그리고 회전 CSS 코드를 다음과 같이 조정하십시오.
.rotate {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
-moz-transform: rotate(-90.0deg); /* FF3.5+ */
-ms-transform: rotate(-90.0deg); /* IE9+ */
-o-transform: rotate(-90.0deg); /* Opera 10.5 */
-webkit-transform: rotate(-90.0deg); /* Safari 3.1+, Chrome */
transform: rotate(-90.0deg); /* Standard */
}
다음 은 업데이트 된 바이올린입니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다