> 웹 프론트엔드 > CSS 튜토리얼 > 받은 편지함 스타일 레이아웃의 표에서 열 너비를 설정하는 방법은 무엇입니까?

받은 편지함 스타일 레이아웃의 표에서 열 너비를 설정하는 방법은 무엇입니까?

DDD
풀어 주다: 2024-10-30 01:54:02
원래의
323명이 탐색했습니다.

How to Set Column Widths in a Table for an Inbox-Style Layout?

테이블 열 너비 설정

시각적으로 매력적이고 기능적인 테이블을 만들려면 열 너비를 사용자 정의해야 하는 경우가 많습니다. 기본 받은 편지함 스타일 표의 경우 목표는 "보낸 사람", "제목" 및 "날짜" 열에 특정 너비를 설정하여 페이지 너비의 다양한 비율을 차지하도록 하는 것입니다.

이러한 사용자 정의를 달성하기 위해 CSS width 속성col 요소와 함께 사용됩니다. 이 요소는 열 레이아웃을 정의하는 colgroup 요소 내에 있습니다. 각 열에 너비 값을 할당하면 해당 크기를 제어할 수 있습니다.

다음은 인라인 CSS 속성을 사용하는 예입니다.

<table style="width: 100%">
    <colgroup>
       <col span="1" style="width: 15%;">
       <col span="1" style="width: 70%;">
       <col span="1" style="width: 15%;">
    </colgroup>
    <!-- Column headers (<thead>) and body rows (<tbody>) go here -->
    <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>
로그인 후 복사

이 코드 조각은 테이블이 전체 페이지 너비를 차지하도록 설정합니다. , 특정 백분율로 세 개의 열을 정의하는 동안:

  • "From": 페이지 너비의 15%
  • "Subject": 페이지 너비의 70%
  • "날짜": 페이지 너비의 15%

위 내용은 받은 편지함 스타일 레이아웃의 표에서 열 너비를 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿