기타 공부

[CSS] HTML table element 행렬 pivot하기

웹 개발자 승민 2023. 10. 11. 21:23

2x4의 형태의 HTML table을

CSS를 간결하게 사용해서

4x2 행렬로 바꿀 수 없을까 연구해봤다.

2x4 행렬

 

<!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를 추가한 결과는 아래와 같다.

 

4x2 행렬

 

이제 pivot을 위해서 존재하는 복잡한 데이터 계산 로직을 제거할 수 있다.

 

다만 flex를 통해 table element의 예외 경우를 만든 것이기 때문에,

화면 개발 측면에서 유지보수는 필요하다.