CSS와 AngularJS를 사용하여 수직 HTML 테이블을 만드는 방법은 무엇입니까?

세로 HTML 테이블

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

CSS 스타일링

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

<code class="css">tr {
  display: block;
  float: left;
}

th, td {
  display: block;
}</code>

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

AngularJS 통합

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

<code class="css">/* border-collapse */
tr>*:not(:first-child) {
  border-top: 0;
}

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

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

위 내용은 CSS와 AngularJS를 사용하여 수직 HTML 테이블을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!