콘텐츠 크기가 다양한 표 셀에서 최적의 콘텐츠 맞춤을 달성하는 방법은 무엇입니까?

최적의 내용 맞춤으로 표 셀 자르기

내용 크기가 다양한 표 셀을 접할 때 균등하게 표시하는 것이 어렵습니다. 가독성을 손상시키지 않고. Fred의 테이블은 이 문제의 예입니다. 고르지 못한 셀 너비를 해결하기 위해 Fred는 white-space: nowrap 및 table-layout:fixed와 같은 CSS 속성을 구현하여 인접한 셀에 영향을 주지 않고 셀이 오버플로되도록 했습니다.

그러나 이 접근 방식은 Fred의 문제를 부분적으로만 해결했을 뿐입니다. . 오른쪽 셀인 Celldito에는 공백이 남아 있는 경우가 많았고 왼쪽 셀은 잘린 상태로 유지되었습니다. 이 문제를 해결하기 위해 Fred는 Celldito에서 사용 가능한 공백을 활용하여 왼쪽 셀의 콘텐츠 가시성을 최적화하여 셀 너비를 균등하게 분배하는 솔루션을 찾았습니다.

Fred가 원하는 결과를 얻기 위한 효과적인 기술에는 테이블의 열 그룹( ) 셀에 추가 스타일을 적용합니다. 아래 구현은 다음을 보장합니다.

• 셀은 인접한 이웃에 영향을 주지 않는 고정된 높이(100% 너비)를 갖습니다.
• 셀에는 보조 열(너비: 0%)이 있습니다. 는 숨겨진 자리 표시자 역할을 하여 첫 번째 열의 너비가 0으로 축소되는 것을 방지합니다.
• 왼쪽 셀의 오버플로는 숨겨지고 해당 내용은 줄임표를 사용하여 잘려서 오른쪽 셀에서 사용 가능한 공백을 사용할 수 있습니다.

코드 조각:

<code class="html"><table border="1" style="width: 100%;">
    <colgroup>
        <col width="100%" />
        <col width="0%" />
    </colgroup>
    <tr>
        <td style="white-space: nowrap; text-overflow:ellipsis; overflow: hidden; max-width:1px;">
            This cell has more content...
        </td>
        <td style="white-space: nowrap;">Less content here.</td>
    </tr>
</table></code>

이 CSS 기반 접근 방식은 Fred에게 원하는 결과를 제공하여 셀 너비가 고르지 않게 되는 동시에 두 셀의 콘텐츠 가시성을 최적화합니다.

위 내용은 콘텐츠 크기가 다양한 표 셀에서 최적의 콘텐츠 맞춤을 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!