CSS를 사용하여 HTML 테이블 구조에서 열 너비를 정확하게 제어하는 ​​방법은 무엇입니까?

테이블 구조에서 열 너비 설정

다양한 웹 개발 시나리오에서는 최적의 프레젠테이션을 위해 테이블 ​​열 너비를 정밀하게 제어하는 ​​것이 필요합니다. 받은 편지함으로 사용되는 다음과 같은 간단한 HTML 테이블을 고려해 보겠습니다.

<code class="html"><table border="1">
    <tr>
        <th>From</th>
        <th>Subject</th>
        <th>Date</th>
    </tr>
</table></code>

우리의 목표는 보낸 사람 및 날짜 열의 너비를 페이지 너비의 15%로 설정하고 제목 열은 나머지 70%를 차지하는 것입니다. %. 또한 표 자체가 전체 페이지 너비에 걸쳐 늘어나기를 원합니다.

이 문제를 해결하기 위해 col 요소 내에서 CSS 너비 속성을 활용할 수 있습니다. 이 속성을 사용하면 픽셀이나 백분율을 포함한 다양한 단위를 사용하여 개별 열의 너비를 지정할 수 있습니다.

<code class="html"><table style="width: 100%">
    <colgroup>
        <col span="1" style="width: 15%;">
        <col span="1" style="width: 70%;">
        <col span="1" style="width: 15%;">
    </colgroup>

    <!-- Table body and rows -->
</table></code>

이 예에서는 colgroup 컨테이너 내에 세 개의 col 요소 집합을 만듭니다. 각 col 요소는 테이블 열을 나타내며 인라인 CSS 스타일을 사용하여 원하는 너비가 할당됩니다. 백분율을 지정하면 열 너비가 전체 표 너비에 비례하여 조정됩니다.

위 내용은 CSS를 사용하여 HTML 테이블 구조에서 열 너비를 정확하게 제어하는 ​​방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!