2x4의 형태의 HTML table을
CSS를 간결하게 사용해서
4x2 행렬로 바꿀 수 없을까 연구해봤다.
<!DOCTYPE html>
<html>
<body>
<table class="pivotTable">
<thead>
<tr>
<td>H1</td>
<td>H2</td>
<td>H3</td>
<td>H4</td>
</tr>
</thead>
<tbody>
<tr>
<td>R1</td>
<td>R2</td>
<td>R3</td>
<td>R4</td>
</tr>
</tbody>
</table>
</body>
<style>
.pivotTable {
display: flex;
flex-direction: row;
}
.pivotTable tr {
display: flex;
flex-direction: column;
}
</style>
</html>css script를 추가한 결과는 아래와 같다.
이제 pivot을 위해서 존재하는 복잡한 데이터 계산 로직을 제거할 수 있다.
다만 flex를 통해 table element의 예외 경우를 만든 것이기 때문에,
화면 개발 측면에서 유지보수는 필요하다.
'기타 공부' 카테고리의 다른 글
| ESLint, Prettier 적용하기 (0) | 2023.03.16 |
|---|---|
| [Git] 실무에서 자주 사용되는 commands (0) | 2023.02.08 |
| MSA 한번에 이해하기 (0) | 2021.11.16 |
| 나중에 보려고 스크랩 해둔 CORS 문제 (0) | 2020.07.07 |
| babel, webpack (0) | 2020.07.07 |