웹 페이지 생성 TD도 오버플로 및 숨길 수 있습니다.

저자：Eve Cole 업데이트 시간：2025-05-22 01:32:01

아마도이 기사 에서이 이름을 얻을 때 누군가가 물어볼 것입니다. 왜 아직도 테이블을 팔로우하고 있습니까? 그것은 이미 구식입니다 ... 서둘러 xhtml ... div는 좋다 ... ul은 좋다 ... ol은 좋다 ... DL이 좋다 ... DL이 좋다 ... 이것은 끝났다. 나는 다른 것이 무엇인지 모른다.

테이블이 실제로 구식입니까? 당신은 정말로 테이블을 알고 있습니까? 정말 테이블을 사용하십니까?

우리는 구두 전투와 싸우기 위해해야 할 일이 아니므로 시간이 충분한 사람들에게 맡기십시오.

주제로 돌아 가기 :

누군가가 테이블을 사용하여 DataGrid를 시뮬레이션하고 고정 너비를 초과하는 TD 텍스트를 숨길 수는 없지만 직접 줄을 감싸는 이유는 무엇입니까?

예, 그것은 다음과 같습니다.

<스타일 유형 = "text/css"> table {너비 : 500px; 테이블 레이 아웃 : 고정;} .col1 {너비 : 100px;} .col2 {width : 200px;} .col3 {너비 : 200px; 테이블에서 : TD는 오버플로를 연주합니다.

위와 같이 코드를 실행하면 고정 너비를 초과하는 셀에서 해당 텍스트가 숨겨져 있지 않지만 새 라인으로 표시됩니다. 분명히, 이것은 내가 의미하는 것이 아닙니다.

이것은 테이블의 특징 인 것 같습니다. {width :*px; white-space : nowrap; 오버플로 : 숨겨진;}의 조합을 지원할 수 없습니다. 최종 분석에서 흰색 공간 : Nowrap은 작동하지 않으므로 오버플로 : 숨겨진 것은 유효하지 않은 것 같습니다. {참고 : 일련의 무의미한 캐릭터 인 경우 적용 할 수 있습니다. 예를 들어 : <td class = col1> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </td>, {white-space : nowrap}는이 일련의 선을 보여줄 필요는 없습니다. 라인 브레이크가없는 단어이므로 .col1 너비를 넘어서 숨겨져 있습니다}

[솔루션 1 :]

나중에 누군가는 비율을 사용하면 충분하다고 언급했습니다. 테스트 후에는 실제로 가능합니다. 나는 첫 번째 단락의 여러 줄의 스타일을 약간 수정했으며 다른 한 줄은 변하지 않았다.

.col1 {너비 : 20%;}

.col2 {너비 : 40%;}

.col3 {너비 : 40%;}

수정 된 코드를 실행 한 후 너비 너머의 텍스트가 실제로 숨겨져 있고 원하는 효과가 얻어진다는 것을 알 수 있습니다.

실제로, 비율을 사용하면이 텍스트를 숨기는 문제를 해결하지만, 때로는 폭이 아닌 고정 너비가 필요하기 때문에 원하는 것이 가장 좋은 솔루션이 아닌 것 같습니다.

이 모든 것의 근본은 셀의 텍스트를 줄을 랩핑하지 않고 한 줄로 표시하는 방법에 있습니다.

[솔루션 2 :]

이 요구 사항을 충족시키기 위해 스타일을 사용하는 것 외에도 오랫동안 사용하지 않은 레이블을 생각할 수도 있습니다. 이 요소의 기능은 컨텐츠를 한 줄에 표시하도록하는 것입니다. 위의 코드는 다음과 같이 수정되며 다른 코드는 변경되지 않습니다.

<테이블 테두리 = 1 CellPacing = 0 요약 = 뒤돌아보고 테이블을 살펴 봅니다 : TD도 오버플로를 재생합니다 : Hidden>

<tr>

<td class = col1> <bobr> Shenzhou Elegant Q400N </nobr> </td>

<td class = col2> <bobr> Elegant Q400N, Intel Core2 Duo (Merom) T5450 (1.66g) 프로세서 </nobr> </td>를 사용합니다

<td class = col3> <obr> Xunchi 4 플랫폼, 뛰어난 비용 효율성, 아름다운 외관 </nobr> </td>

</tr>

</테이블>

이 수정 후에는 효과가 실제로 달성된다는 것을 알게 될 것입니다. 흥분해야합니까? 아니요, 이것은 최상의 솔루션이 아닌 것 같습니다. 결국, 오랫동안 사용되지 않았고 권장되지 않은 요소 마크를 사용하는 것은 약간 불쾌하기 때문입니다.

이 아이디어에 따라, 나는이 문제를 다른 관점에서 고려했으며 문제를 쉽게 해결할 수 있음을 발견했습니다.

고정 너비 셀에서 흰색 공간을 추가 할 수는 없으므로 고정 너비 셀에서 TH와 TD로 이제 TD를 추가 할 수 없으므로 고정 너비 셀에 다른 마커 요소를 추가하는 것은 어떻습니까?

최상의 솔루션 :

<! doctype html public "-// w3c // dtd xhtml 1.0 엄격한 // en" "http://www.w3.org/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type"content = "text/html; charset = gb2312"/> <meta http-requiv = "content-language"content = at ait toke <title </> </> </> </>. TD는 또한 오버플로를 재생합니다 : hidden </title> <style type = "text/css"> table {width : 500px; 테이블 레이 아웃 : 고정;} .col1 {width : 100px;} .col2 {너비 : 200px;} .col3 {width : 200px; {white-space : nowrap; 오버플로;} </style> </head> <body> <table cellpacing = "0"summary = "test"> <thead> <tr> <th> <strong> 제품 이름 </strong> </th> <th> <strong> 제품 소개 </strong> <th> <trong> 제품 노트 </th> </th> </th> <tt> <td> Shenzhou Elegant Q400N </td> <td> 2007 년 7 월에 출시 된 Elegant Q400N은 Intel Core2 Duo (Merom) T5450 (1.66g) 프로세서 </td> <td> Xinchi 4 플랫폼, 전단 비용 효율성, 아름다운 등장 </td> </tbody> </td> </tbody> </td> </html>

위의 코드를 실행하면이 접근법이 정상이며 코드의 단순성, 가독성 및 합리성 측면에서 이전 솔루션보다 낫습니다.

{셀의 고정 너비를 초과하는 내용을 숨기지 않은 학생들은 먼저 기계에서 재생할 수 있으며이 기사를 읽을 수 있습니다.}

사실, 테이블은 흥미롭고 재생 가능한 것입니다. 우리는 그 자체의 이유가 있기 때문에 색깔의 눈으로 그것을 보지 말아야합니다.

나는 나중에 테이블에 관한 몇 가지 기사를 계속 쓸 것이며 자기 엔터테인먼트 역할을 할 것입니다.