CSS로 수직 HTML 테이블을 만드는 방법은 무엇입니까?

세로 HTML 테이블 만들기

HTML에서 테이블은 일반적으로 가로 행과 세로 열로 표시됩니다. 그러나 이 방향을 반전시켜 왼쪽에 세로 행과 테이블 헤더가 있는 "세로" 테이블을 생성하려는 시나리오가 발생할 수 있습니다.

이를 달성하려면 간단한 CSS 솔루션을 사용할 수 있습니다.

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

이 CSS는 표 헤더 셀이 왼쪽에 표시되면서 개별 행이 서로 옆에 수직 블록으로 표시되도록 표 내의 요소를 재정렬합니다.

행에 액세스 수직 테이블

CSS는 테이블의 모양을 변형하지만 HTML 코드의 행에 액세스하는 방법에는 영향을 미치지 않습니다. 여전히 기존 가로 표에서와 마찬가지로 데이터를 동적으로 삽입하는 요소입니다.

추가 스타일 고려 사항

세로 표의 시각적 모양을 더욱 향상하려면 다음을 고려할 수 있습니다. :

• border-collapse를 사용하여 인접한 셀 사이의 테두리를 제거합니다.
• 및 / 최적의 셀 크기를 위한 요소.

예제 코드

다음은 사용자 정의할 수 있는 세로 HTML 테이블의 예입니다.

<code class="css">/* single-row column design */
tr { display: block; float: left; }
th, td { display: block; border: 1px solid black; }

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

<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 스타일을 구현하면 기존 테이블의 기능과 접근성을 유지하면서 HTML로 세로 테이블을 쉽게 만들 수 있습니다.

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