CSS를 사용하여 표 셀의 너비를 동일하게 만드는 방법은 무엇입니까?

CSS를 사용한 동일 너비 테이블 셀

질문:

어떻게 불확정을 만들 수 있나요? 테이블 컨테이너 내의 테이블 셀 요소 수는 콘텐츠 크기에 관계없이 동일한 너비를 갖습니까?

답변:

예, 순수 CSS를 사용하여 이를 달성하는 것이 가능합니다. .

<code class="css">div {
  display: table;
  width: 250px;
  table-layout: fixed;
}

div > div {
  display: table-cell;
  width: 2%; /* or 100% according to OP comment */
}</code>

작동 방식은 다음과 같습니다.

1. 테이블 레이아웃 설정: 고정; 상위 div 컨테이너에. 그러면 테이블이 지정된 크기를 유지하려고 하는 테이블 레이아웃 알고리즘이 활성화됩니다.
2. 각 div(테이블-셀)에 너비를 할당합니다. 이 예에서는 이를 2%로 설정했지만 요구 사항에 따라 조정할 수 있습니다.
3. 이 너비는 고정 테이블 레이아웃 동작을 트리거하고 브라우저는 너비를 각 셀에 균등하게 할당하여 다음을 보장합니다. 콘텐츠 크기에 관계없이 너비가 동일합니다.

추가 참고 사항:

• 이 솔루션은 Chrome 및 IE8과 호환됩니다.
• macOS의 Safari 6에는 테이블 레이아웃에 대한 다른 해석이 있습니다: 고정;. 이로 인해 해당 브라우저에서 다른 결과가 나타날 수 있습니다.
• 상위 div(표)에 고정 너비를 설정하여 표의 전체 너비를 제어할 수 있습니다. 너비를 지정하지 않으면 기본값은 100%입니다.

위 내용은 CSS를 사용하여 표 셀의 너비를 동일하게 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!