순전히 CSS를 사용하여 다양한 내용으로 동일한 너비의 표 셀을 만들 수 있습니까?

가변 콘텐츠가 포함된 동일한 너비의 표 셀

표 컨테이너 내에 여러 개의 표-셀 요소가 있는 시나리오를 생각해 보세요. 콘텐츠 크기가 다르더라도 이러한 테이블 셀의 너비는 동일해야 합니다. 이를 달성하기 위한 순수한 CSS 솔루션이 있습니까?

해결책:

콘텐츠 크기에 관계없이 동일한 너비의 테이블 셀을 달성하려면 다음 CSS 접근 방식을 활용할 수 있습니다. :

1. 고정 테이블 레이아웃: 테이블 레이아웃 적용: 고정; 테이블을 나타내는 상위 div에. 이는 기본적으로 브라우저가 지정된 셀 너비를 엄격하게 준수하도록 지시합니다.
2. 최소 셀 너비: 각 셀에 대해 2%와 같은 작은 너비라도 최소 너비를 설정합니다(div > div). 그러면 브라우저가 지정된 셀 크기를 존중하려고 시도하는 원하는 테이블 레이아웃 알고리즘이 트리거됩니다.

코드 예:

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

div > div {
  display: table-cell;
  width: 2%;
}</code>

참고 :

이 솔루션은 Chrome, IE8 및 Safari 6에서 작동합니다(몇 가지 주의 사항 있음). 그러나 Safari 6은 다른 브라우저와 비교하여 테이블 레이아웃 동작이 다를 수 있다는 점을 기억하는 것이 중요합니다.

위 내용은 순전히 CSS를 사용하여 다양한 내용으로 동일한 너비의 표 셀을 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!