CSS에서 테이블(테이블)의 너비를 설정하는 방법

웹 페이지 레이아웃 디자인에서는 데이터를 정렬하기 위해 표를 자주 사용합니다. 표를 사용할 때 페이지의 아름다움과 가독성을 보장하려면 표의 너비를 설정해야 합니다. 다음은 CSS를 사용하여 테이블(테이블)의 너비를 설정하는 방법을 소개합니다.

1. CSS에서 너비 속성을 사용하세요.

CSS에는 요소의 너비를 설정하는 데 사용할 수 있는 너비 속성이 있습니다. 테이블에서 이 속성을 사용하여 테이블 너비를 설정할 수도 있습니다. 구체적인 방법은 다음과 같습니다.

1. CSS 스타일 시트에서 "테이블" 선택기를 사용하여 테이블 요소를 선택합니다.
2. width 속성을 사용하여 테이블의 너비 값(픽셀 또는 백분율일 수 있음)을 지정합니다.

예를 들어 다음 코드는 표의 너비를 400픽셀로 설정합니다.

<table style="width: 400px;">
  <tr>
    <td>内容1</td>
    <td>内容2</td>
  </tr>
  <tr>
    <td>内容3</td>
    <td>内容4</td>
  </tr>
</table>

위 코드에서는 표 요소의 "width" 속성을 "400px"로 설정하여 전체 표의 너비가 400픽셀로 제한됩니다. 표의 내용이 400픽셀을 초과하더라도 표는 늘어나지 않고 스크롤 막대가 표시됩니다.

width 속성을 백분율 값으로 설정하면 테이블 너비는 상위 요소의 너비에 비례합니다. 예를 들어, 다음 코드는 테이블 너비를 상위 요소 너비의 50%로 설정합니다.

<div>
  <table style="width: 50%;">
    <tr>
      <td>内容1</td>
      <td>内容2</td>
    </tr>
    <tr>
      <td>内容3</td>
      <td>内容4</td>
    </tr>
  </table>
</div>

위 코드에서는 테이블 요소의 "width" 속성을 "50%"로 설정하여 테이블의 너비는 자동으로 테이블에 맞춰집니다. 상위 요소의 너비는 더 나은 반응형 디자인 효과를 갖습니다.

2 CSS에서 min-width 속성과 max-width 속성을 사용하세요

width 속성을 사용하여 테이블 너비를 설정하는 것 외에도 CSS에서 min-width 속성과 max-width 속성을 사용하여 설정할 수도 있습니다. 테이블의 최소 너비와 최대 너비. 이러한 속성의 사용법은 width 속성과 유사하므로 그에 따라 속성 이름을 변경하면 됩니다.

예를 들어, 테이블이 너무 작아서 레이아웃에 영향을 미치는 것을 방지하기 위해 테이블의 최소 너비 값을 설정할 수 있습니다. 예를 들면 다음과 같습니다.

<table style="min-width: 200px;">
  <tr>
    <td>内容1</td>
    <td>内容2</td>
  </tr>
  <tr>
    <td>内容3</td>
    <td>内容4</td>
  </tr>
</table>

위 코드에서는 테이블 요소의 "min-width" 속성을 "200px"로 설정하여 내용이 거의 없더라도 테이블의 너비가 200px보다 작지 않도록 했습니다. 탁자.

마찬가지로 표가 너무 커서 페이지 레이아웃에 영향을 미치는 것을 방지하기 위해 표의 최대 너비 값을 설정할 수도 있습니다. 예를 들면 다음과 같습니다.

<table style="max-width: 800px;">
  <tr>
    <td>内容1</td>
    <td>内容2</td>
  </tr>
  <tr>
    <td>内容3</td>
    <td>内容4</td>
  </tr>
</table>

위 코드에서는 테이블 요소의 "max-width" 속성을 "800px"로 설정하여 테이블에 내용이 많아도 테이블의 너비가 800픽셀을 초과하지 않습니다.

요약:

위는 CSS를 사용하여 표(table)의 너비를 설정하는 여러 가지 방법입니다. 실제 웹사이트 애플리케이션에서는 최상의 페이지 효과를 얻으려면 실제 상황에 따라 적절한 너비 설정 방법을 선택해야 합니다.

위 내용은 CSS에서 테이블(테이블)의 너비를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!