백분율을 사용하여 표 셀의 최대 너비를 설정하는 방법은 무엇입니까?

백분율을 사용하여 표 셀의 최대 너비 설정

백분율을 사용하여 표 셀의 최대 너비 제약 조건을 설정하는 것은 까다로울 수 있습니다. 다음 예를 고려하십시오.

<table>
  <tr>
    <td>Test</td>
    <td>A long string blah blah blah</td>
  </tr>
</table>

<style>
  td {
    max-width: 67%;
  }
</style>

이 경우 max-width 설정은 적용되지 않습니다. 그렇다면 백분율을 사용하여 이를 어떻게 달성할 수 있습니까?

해결책

해결책에는 테이블 요소의 table-layout 속성을 ​​활용하는 것이 포함됩니다. 고정으로 설정하면 표 셀의 크기를 비례적으로 조정할 수 있습니다.

table {
  width: 100%;
  table-layout: fixed;
}

이 CSS 규칙은 표 너비가 사용 가능한 전체 공간을 차지하고 표 셀의 너비가 조정되도록 합니다. 따라서. 이제 개별 셀의 최대 너비 설정 백분율이 적용됩니다.

예:

<table>

table-layout:fixed를 추가하면 최대 너비 제한이 적용됩니다. 두 번째 테이블 셀은 효과적으로 적용되어 상위 테이블에 비해 너비가 줄어듭니다.

위 내용은 백분율을 사용하여 표 셀의 최대 너비를 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!