CSS를 통해서만 테이블의 행(row) 순서를 변경하여 좌우로 반전시킵니다.
5812 단어 HTMLbad_knowhowCSS
하고 싶은 일
HTML로 작성된 테이블이 있습니다. 보통 (기본값) 설정은'왼쪽에서 오른쪽으로 계속 이어지는 내용'의 상태입니다. 순서를 바꾸고 싶고 CSS 기술로만 뭔가를 하고 싶습니다!이런 장면도 못 하잖아...수법.
CSS는 이렇게 쓰여있어요.
tr (table row)는 가로줄이므로 먼저 transform 좌우로 반전시킨다.이대로라면 거울문자가 돼 읽을 수 없기 때문에 각각의 구성요소td (table data)를 다시 좌우로 반전시켜 정상적으로 표시할 수 있다..reversed table tr {
transform: scale(-1, 1);
}
.reversed table td {
transform: scale(-1, 1);
}
th (table header) 등이 있으면 보충해야 한다.table tr 이럴 경우 하위 요소로 지정된 것은 caption 등 원래의 목표를 유지하는 것이다.전체 견본
table.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<table>
<caption>通常のテーブル</caption>
<tr>
<th>ヘッダー左上</th> <th>ヘッダー中央</th> <th>ヘッダー右上</th>
</tr>
<tr>
<td>A1</td> <td>B1</td> <td>C1</td>
</tr>
<tr>
<td>A2</td> <td>B2</td> <td>C2</td>
</tr>
</table>
<br>
<div class="container reversed">
<table>
<caption>反転しているテーブル</caption>
<tr>
<th>ヘッダー左上</th> <th>ヘッダー中央</th> <th>ヘッダー右上</th>
</tr>
<tr>
<td>A1</td> <td>B1</td> <td>C1</td>
</tr>
<tr>
<td>A2</td> <td>B2</td> <td>C2</td>
</table>
</div>
</body>
</html>
.reversed table tr {
transform: scale(-1, 1);
}
.reversed table th {
transform: scale(-1, 1);
}
.reversed table td {
transform: scale(-1, 1);
}
Reference
이 문제에 관하여(CSS를 통해서만 테이블의 행(row) 순서를 변경하여 좌우로 반전시킵니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/RyoIchimura/items/8987177d7b29025a32b6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
