백분율을 사용하여 표 셀 최대 너비를 효과적으로 제어하는 ​​방법은 무엇입니까?

표 셀에 대한 CSS 최대 너비 기능 확장: 백분율 활용

HTML 표 영역에서는 최대 너비를 제어하는 ​​것이 바람직한 경우가 많습니다. 특히 긴 텍스트를 처리하거나 장치 간 호환성을 보장할 때 테이블 셀의 너비. 그러나 백분율을 사용하여 최대 너비를 설정하면 제한이 발생할 수 있습니다.

주어진 코드 조각에서:

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

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

최대 너비를 백분율로 표 셀에 적용하면 그에 따라 너비가 직관적으로 조정됩니다. . 그러나 브라우저 호환성 문제가 발생하여 일관성 없는 렌더링이 발생할 수 있습니다.

이러한 제한을 극복하기 위한 덜 알려진 솔루션이 있습니다: 바로 'table-layout' CSS 속성입니다. table 태그에 'table-layout:fixed'를 설정하면 그 안에 있는 모든 셀에 대해 고정 너비 레이아웃을 설정할 수 있습니다. 이는 백분율을 사용하여 셀의 최대 너비를 제어하는 ​​일관되고 안정적인 방법을 제공합니다.

table {
  width: 100%;
  table-layout: fixed;
}
td {
  max-width: 67%;
}

이 접근 방식을 사용하면 브라우저 호환성 문제에 관계없이 백분율을 사용하여 셀의 최대 너비를 효과적으로 제어할 수 있습니다. 실제로 작동하는 모습을 보려면 다음 업데이트된 Fiddle을 참조하세요: http://jsfiddle.net/Fm5bM/4/.

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