콘텐츠 오버플로가 발생할 때 표 셀을 균등하게 자르는 방법은 무엇입니까?

균등하게 잘리는 테이블 셀

아파트 공간이 변동하는 테이블인 Fred는 자신의 셀에 다양한 콘텐츠를 맞추는 과제에 직면합니다. 콘텐츠가 너무 많아지면 Fred는 테이블 너비가 넘치지 않도록 셀 하나의 콘텐츠를 잘라냅니다. 그러나 그는 모든 셀이 콘텐츠 잘림에 동일하게 기여하는 더 나은 솔루션이 존재할 수 있다고 의심합니다.

Fred의 우려를 해결하기 위해 다음 접근 방식을 사용할 수 있습니다.

<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.This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.
        </td>
        <td style="white-space: nowrap;">
            Less content here.
        </td>
    </tr>
</table>

이 솔루션에서는 다음과 같습니다.

• colgroup 요소는 두 개의 열을 지정하기 위해 도입되었습니다. 하나는 너비가 100%로 테이블 너비의 대부분을 차지하고 다른 하나는 너비가 0%로 유연한 셀 역할을 합니다.
• 첫 번째 셀에는 공백이 있습니다. 줄 바꿈을 방지하기 위한 nowrap 스타일, text-overflow: 내용을 자르기 위한 줄임표, 오버플로: 추가 내용을 숨기기 위한 hided.
• 최대값 -width: 첫 번째 셀의 1px 스타일을 사용하면 필요한 만큼만 너비를 차지하고 두 번째 셀에 남은 공간을 남겨두게 됩니다.
• 두 번째 셀은 원본을 유지하기 위해 공백을 사용합니다: nowrap 너비.

이 접근 방식을 사용하면 공간이 충분할 때 모든 셀에 전체 내용이 표시됩니다. 그러나 공간이 부족한 경우 첫 번째 셀의 내용이 먼저 잘리고 두 번째 셀에 내용을 표시할 추가 공간이 제공됩니다.

위 내용은 콘텐츠 오버플로가 발생할 때 표 셀을 균등하게 자르는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!