각 열에 대해 서로 다른 비율로 특정 레이아웃을 얻기 위해 CSS를 사용하여 테이블 열의 너비를 어떻게 설정합니까?-CSS 튜토리얼-php.cn

각 열에 대해 서로 다른 비율로 특정 레이아웃을 얻기 위해 CSS를 사용하여 테이블 열의 너비를 어떻게 설정합니까?

Barbara Streisand

풀어 주다： 2024-10-27 14:37:01

원래의

479명이 탐색했습니다.

How can I set the width of table columns using CSS to achieve a specific layout with different percentages for each column?

테이블 열 너비 설정

이 튜토리얼에서는 원하는 레이아웃을 얻기 위해 테이블 열 너비를 설정하는 방법에 대한 지침을 제공합니다. 받은 편지함으로 사용되는 다음 테이블을 고려해 보세요.

<table>
    <tr>
        <th>From</th>
        <th>Subject</th>
        <th>Date</th>
    </tr>
</table>

로그인 후 복사

목표는 페이지 너비의 15%를 "보낸 사람" 및 "날짜" 열에 할당하고, "제목"에 70%를 할당하는 것입니다. 열. 또한 테이블은 전체 페이지 너비에 걸쳐 있어야 합니다.

CSS 너비 속성 사용

이 레이아웃을 구현하려면 col 요소의 너비 CSS 속성을 사용할 수 있습니다. . 이 속성을 사용하면 열 너비를 픽셀 단위 또는 상위 요소 너비의 백분율로 지정할 수 있습니다.

인라인 스타일 속성이 포함된 다음 예를 고려하세요.

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

    <thead>
        <tr>
            <th>From</th>
            <th>Subject</th>
            <th>Date</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td style="background-color: #777">15%</td>
            <td style="background-color: #aaa">70%</td>
            <td style="background-color: #777">15%</td>
        </tr>
    </tbody>
</table>

로그인 후 복사

이러한 너비를 지정하면 테이블은 전체 페이지 너비를 차지하며 열의 크기는 지정된 백분율에 따라 비례적으로 조정됩니다. 이 접근 방식을 사용하면 페이지 너비가 변경되더라도 유연한 열 너비가 가능하여 일관된 레이아웃이 보장됩니다.

위 내용은 각 열에 대해 서로 다른 비율로 특정 레이아웃을 얻기 위해 CSS를 사용하여 테이블 열의 너비를 어떻게 설정합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!