>웹 프론트엔드 >CSS 튜토리얼 >CSS의 table-layout:fixed 속성 사용법

CSS의 table-layout:fixed 속성 사용법

巴扎黑
巴扎黑원래의
2017-06-28 10:25:181810검색

table-layout:fixed 속성 사용:
고정된 크기의 테이블을 원하는 경우 내부 텍스트가 강제로 줄바꿈됩니다(특히 공백 구분 없이 긴 문자열의 영어 텍스트인 경우). 지나치게 긴 텍스트

가 테이블을 깨뜨리는 것을 방지하기 위해 일반적으로 테이블 레이아웃: 고정 스타일이 사용됩니다. 하지만 Firefox에서는 몇 가지 문제가 있을 수 있습니다. Gmail의 일부 사례를 참조하고 몇 가지

테스트를 수행한 후 해결책을 찾아보세요.

예 1: (IE 브라우저) 일반적인 상황

CODE:

< ;/ tr>
abcdefghigklmnopqrstuvwxyz 1234567890

width=80이 작동하지 않고 테이블이 문자만큼 늘어나는 것을 볼 수 있습니다.

예 2: (IE 브라우저) 스타일 table-layout:fixed

CODE:

abcdefghigklmnopqrstuvwxyz 1234567890

width=80 작동하지만 테이블이 줄바꿈됩니다.

예 3: (IE 브라우저) table-layout:fixed 및 nowrap

CODE:

abcdefghigklmnopqrstuvwxyz 1234567890


width=80 작동, 줄 바꿈이 있음 또한 제거되었습니다.


예 4: (IE 브라우저) td 크기를 수정하기 위해 숫자 값을 사용할 때 table-layout:fixed 및 nowrap 스타일을 사용하세요

CODE:




abcdefghigklmnopqrstuvwxyz 1234567890 abcdefghigklm nopqrstuvwxyz 1234567890 & lt;/td & gt;
& lt;/tr & gt;
& lt;/table & gt; 불행히도, 첫 번째 TD의 Nowrap은 5 : (IE 브라우저) 비율을 사용하지 않습니다. 스타일 table-layout:fixed with nowrap

CODE:



0

abcdefghigklmnopqrstuvwxyz 1234567890


다음으로 변경됨 퍼센트, 마침내 얻었습니다

예 6: (Firefox 브라우저) td 크기를 수정하기 위해 퍼센트를 사용할 때 table-layout:fixed 스타일과 nowrap 효과를 사용하십시오: 예제 5를 firefox 아래에 두었지만 다시 실패했습니다

예 7: (Firefox 브라우저 ) td 크기를 수정하기 위해 백분율을 사용할 때는 table-layout:fixed 및 nowrap 스타일을 사용하고, p
CODE:



< td width="25%" class="td" nowrap>

abcdefghigklmnopqrstuvwxyz 1234567890

, p

CODE 사용 :


CODE:

abcdefghigklmnopqrstuvwxyz 1234567890




위 내용은 CSS의 table-layout:fixed 속성 사용법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

abcdefghigklmnopqrstuvwxyz 1234567890

예 IE와 Firefox 모두에서 페이지 강제 줄 바꿈 문제를 완벽하게 해결할 수 있는 솔루션입니다.



또한 계속해서 몇 가지 정보를 확인했습니다. 첫 번째 줄의 너비만 중요하므로 첫 번째 줄을 정의할 수 있나요?

colgroup 속성을 찾았습니다.
아아아아