일관된 셀 너비를 유지하고 콘텐츠 표시를 최대화하면서 표 셀 잘림을 해결하는 방법은 무엇입니까?

내용 표시를 최대화하면서 표 셀 잘림 문제 해결

테이블 레이아웃 영역에서는 셀 내용이 다음을 초과할 때 셀 잘림 문제가 발생합니다. 지정된 너비. 간단한 해결책은 전체 정보가 표시되지 않음을 나타내기 위해 줄임표(...)를 제공하여 내용을 자르는 것입니다. 그러나 이 접근 방식은 셀 너비가 고르지 않게 되어 일부 셀에 과도한 공백이 남을 수 있습니다.

이 문제를 해결하기 위해 사용 가능한 공백을 모두 사용한 후에만 셀이 균일하게 오버플로되도록 하는 기술을 사용할 수 있습니다.

코드 솔루션:

다음 코드 조각은 이 접근 방식을 예시합니다.

<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.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></code>

설명:

1. 열 그룹(colgroup):

   • 을 사용하여 두 개의 열을 정의합니다. 첫 번째 열은 100% 너비를 차지하고 두 번째 열은 너비가 0%입니다. 이를 통해 두 셀의 너비를 제어할 수 있습니다.

2. 테이블 셀 스타일:

   • 첫 번째 셀에는 다음과 같은 스타일 속성이 있습니다.

     • white-space: nowrap: 내용이 여러 줄로 넘어가는 것을 방지합니다
     • text-overflow:ellipsis: 줄임표로 내용을 자릅니다
     • overflow: Hidden: 넘쳐나는 내용을 숨깁니다
     • max-width:1px: 셀의 초기 너비를 최소화하여 셀이 완전히 접히지 않도록 보장합니다

3. 두 번째 테이블 셀:

   • 두 번째 셀에 공백이 있습니다. nowrap, 콘텐츠 줄 바꿈을 방지하고 두 번째 열이 0% 너비를 따릅니다.

첫 번째 열의 최대 너비를 1픽셀로 설정하면 테이블에서 "가장 약한" 지점이 됩니다. 테이블이 수평으로 축소됨에 따라 첫 번째 셀이 이 너비 임계값을 초과하고 자르기 시작하여 두 번째 셀 열의 너비에 영향을 주지 않고 축소되는 공간을 수용합니다.

결과:

이 접근 방식은 다음과 같은 이점을 제공합니다.

• 셀이 균등하게 오버플로되어 너비가 일정해집니다.
• 셀은 공백이 모두 소진된 경우에만 잘립니다.
• 테이블이 크게 줄어드는 경우에도 두 번째 셀의 내용은 유지됩니다.

위 내용은 일관된 셀 너비를 유지하고 콘텐츠 표시를 최대화하면서 표 셀 잘림을 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!