열 기반 표시로 수직으로 정렬된 HTML 테이블을 만드는 방법은 무엇입니까?

수직으로 정렬된 HTML 테이블: 열 기반 표시 달성

행이 왼쪽에 테이블 헤더와 함께 세로로 표시되는 세로 테이블은 HTML에서 독특한 과제를 제시합니다. 다음은 CSS를 사용하여 이 문제에 대한 간단한 해결책입니다.

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

이 접근 방식은 표 셀의 방향을 효과적으로 반전시켜

일반 테이블에서와 마찬가지로요. 그러나 이 방법은 각 셀을 단일 행으로 처리하여 rowspan 또는 colspan과 같은 테이블과 유사한 동작을 삭제한다는 점에 유의하는 것이 중요합니다.

예:

To 이를 설명하려면 제안된 CSS로 마크업된 다음 HTML 테이블을 고려하십시오.

<code class="html"><table>
  <tr>
    <th>name</th>
    <th>number</th>
  </tr>
  <tr>
    <td>James Bond</td>
    <td>007</td>
  </tr>
  <tr>
    <td>Lucipher</td>
    <td>666</td>
  </tr>
</table></code>

결과는 두 개의 "행"(열로 표시됨)과 두 개의 "열"(으로 표시됨)이 있는 수직 정렬 테이블이 됩니다. 행).

추가 고려 사항:

올바른 테두리 렌더링을 보장하려면 다음 CSS를 추가할 수 있습니다.

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

이렇게 하면 각 행(열)의 첫 번째 셀을 제외한 모든 셀의 위쪽 및 왼쪽 테두리를 제거하여 효과적으로 테두리 없는 모양을 만듭니다.

위 내용은 열 기반 표시로 수직으로 정렬된 HTML 테이블을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!