반응형
텍스트를 왼쪽으로 90도 회전하는 방법 및 셀 크기는 html의 텍스트에 따라 조정됩니다.
행과 열이있는 테이블이 있다고 가정하면 다음과 같이 셀의 텍스트를 회전하고 싶습니다
.
문제는 스타일을 사용하여 텍스트를 회전 할 때입니다.
#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 */
다 이렇게 엉망이 돼
html 코드 :
<table cellpadding="0" cellspacing="0" align="center">
<tr>
<td id='rotate'>10kg</td>
<td >B</td>
<td >C</td>
<td>D</td>
<td>E</td>
</tr>
<tr>
<td id='rotate'>20kg</td>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
</tr>
<tr>
<td id='rotate'>30kg</td>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
</tr>
</table>
css :
<style type="text/css">
td {
border-collapse:collapse;
border: 1px black solid;
}
tr:nth-of-type(5) td:nth-of-type(1) {
visibility: hidden;
}
#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 */
}
</style>
회전 CSS를 내부 요소에 적용한 다음 요소가에 맞게 회전되었으므로 요소의 높이를 너비와 일치하도록 조정하면됩니다 <td>.
또한 id #rotate여러 개가 있으므로 클래스로 변경하십시오 .
$(document).ready(function() {
$('.rotate').css('height', $('.rotate').width());
});td {
border-collapse: collapse;
border: 1px black solid;
}
tr:nth-of-type(5) td:nth-of-type(1) {
visibility: hidden;
}
.rotate {
/* FF3.5+ */
-moz-transform: rotate(-90.0deg);
/* Opera 10.5 */
-o-transform: rotate(-90.0deg);
/* Saf3.1+, Chrome */
-webkit-transform: rotate(-90.0deg);
/* IE6,IE7 */
filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.083);
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
/* Standard */
transform: rotate(-90.0deg);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<div class='rotate'>10kg</div>
</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
</tr>
<tr>
<td>
<div class='rotate'>20kg</div>
</td>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
</tr>
<tr>
<td>
<div class='rotate'>30kg</div>
</td>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
</tr>
</table>자바 스크립트
순수 JavaScript에서 위와 동일한 내용은 다음과 같습니다.
window.addEventListener('load', function () {
var rotates = document.getElementsByClassName('rotate');
for (var i = 0; i < rotates.length; i++) {
rotates[i].style.height = rotates[i].offsetWidth + 'px';
}
});
Daniel Imms 답변은 CSS 회전을 내부 요소에 적용하는 것과 관련하여 우수합니다. 그러나 자바 스크립트가 필요하지 않고 더 긴 텍스트 문자열로 작동 하는 방식으로 최종 목표를 달성 할 수 있습니다 .
일반적으로 첫 번째 표 열에 세로 텍스트가있는 전체 이유는 짧은 가로 공간에 긴 텍스트 줄을 맞추고 (귀하의 예에서와 같이) 긴 콘텐츠 행 또는 여러 줄의 콘텐츠 (여기서는 이 예에서 사용).
부모 TD 태그에서 ".rotate"클래스를 사용하면 내부 DIV를 회전 할 수있을뿐만 아니라 모든 텍스트가 한 줄에 유지되도록하는 부모 TD 태그에 몇 가지 CSS 속성을 설정할 수도 있습니다. 너비를 1.5em으로 유지하십시오. 그런 다음 내부 DIV에 약간의 마이너스 여백을 사용하여 제대로 중앙에 있는지 확인할 수 있습니다.
td {
border: 1px black solid;
padding: 5px;
}
.rotate {
text-align: center;
white-space: nowrap;
vertical-align: middle;
width: 1.5em;
}
.rotate div {
-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 */
margin-left: -10em;
margin-right: -10em;
}<table cellpadding="0" cellspacing="0" align="center">
<tr>
<td class='rotate' rowspan="4"><div>10 kilograms</div></td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
</tr>
<tr>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
</tr>
<tr>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
</tr>
<tr>
<td>Q</td>
<td>R</td>
<td>S</td>
<td>T</td>
</tr>
<tr>
<td class='rotate' rowspan="4"><div>20 kilograms</div></td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
</tr>
<tr>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
</tr>
<tr>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
</tr>
<tr>
<td>Q</td>
<td>R</td>
<td>S</td>
<td>T</td>
</tr>
<tr>
<td class='rotate' rowspan="4"><div>30 kilograms</div></td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
</tr>
<tr>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
</tr>
<tr>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
</tr>
<tr>
<td>Q</td>
<td>R</td>
<td>S</td>
<td>T</td>
</tr>
</table>이 솔루션에서 명심해야 할 한 가지는 행 (또는 스팬 행)의 높이가 첫 번째 열의 세로 텍스트보다 짧으면 제대로 작동하지 않는다는 것 입니다. 여러 행에 걸쳐 있거나 긴 행을 만드는 많은 콘텐츠가있는 경우 가장 잘 작동합니다.
jsFiddle 에서 재미있게 놀아보세요 .
높이를 계산하지 않고. 엄격한 CSS 및 HTML. <span/>Chrome에서만 텍스트 방향을 변경할 수 없기 때문입니다 <th/>.
th
{
vertical-align: bottom;
text-align: center;
}
th span
{
-ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
transform: rotate(180deg);
white-space: nowrap;
}<table>
<tr>
<th><span>Rotated text by 90 deg.</span></th>
</tr>
</table>불행히도 이러한 답변이 저에게 도움이 될 것이라고 생각했지만 오버플로 -x가 재생되는 반응 형 테이블 내부의 테이블을 사용하고 있기 때문에 솔루션으로 고생했습니다.
따라서이를 염두에두고이 링크에서 이상한 너비 오버플로 문제가없는보다 깨끗한 방법을 살펴보십시오. 결국 저에게 효과가 있었고 구현하기가 매우 쉬웠습니다.
반응형
'Programing' 카테고리의 다른 글
| 플렉스 아이템이 텍스트로 인해 넘치지 않게하는 방법은 무엇입니까? (0) | 2020.11.08 |
|---|---|
| 이미지를 BufferedImage로 변환하는 Java (0) | 2020.11.08 |
| JWT와 Bearer Token의 차이점은 무엇입니까? (0) | 2020.11.08 |
| 기능적 프로그래밍 및 비 기능적 프로그래밍 (0) | 2020.11.08 |
| 회전 된 직사각형에서 경계 상자 좌표 계산 (0) | 2020.11.08 |