세로 HTML 테이블

세로 행이 있는 HTML 테이블을 생성하면 행 머리글이 위쪽이 아닌 왼쪽이요. 이를 달성하려면 CSS 스타일을 적용하여 테이블 구조를 변환할 수 있습니다.

CSS 스타일링

테이블 행을 세로 열로 렌더링하려면 다음 CSS 규칙을 따르세요. 사용할 수 있습니다:

tr {
  display: block;
  float: left;
}

th, td {
  display: block;
}

이렇게 하면 표 셀이 수직으로 흐르게 되며 해당 헤더가 각 행의 왼쪽에 나타납니다.

AngularJS 통합

이제 열로 표시되는 테이블 행에 대한 액세스를 유지하려면 다음 CSS 규칙을 통합하면 됩니다.

/* border-collapse */
tr>*:not(:first-child) {
  border-top: 0;
}

tr:not(:first-child)>* {
  border-left: 0;
}

이러한 규칙은 표 셀 사이의 테두리가 가장자리에서만 렌더링되도록 보장하여 행 간의 명확한 구분을 제공합니다. AngularJS와 함께 이러한 기술을 사용하면 수직 방향을 유지하면서 테이블 데이터를 동적으로 조작할 수 있습니다.