[HTML] table 태그의 width 속성 (지식IN)

[질문]

보통 테이블 만들때요

table 태그랑 td 태그에 width 속성을 주잖아요

근데 그 길이보다 글을 더 길게 적으면

width 속성과 상관없이 칸의 길이가 길어지나요??

방지할수 잇는 방법(길이고정)은 없나요???

[답변]

테이블 셀에 영어 또는 숫자를 연속으로 넣으면 자동으로 줄 바꿈 되지 않고 width 폭 이상으로 테이블 폭이 아래와 같이 넓어져 버리는 문제가 있습니다.

 

<table width="200" border="1" cellspacing="0" cellpadding="0">
    <tr>
        <td width="100">abcdefghijklmnopqrstuvwxyz</td>
        <td width="100">&nbsp;</td>
    </tr>
</table>

 

이것의 원인은 공백을 포함하지 않는 긴 영어나 숫자 등의 문자를 하나의 단어로 간주해서 자동 줄 바꿈이 되지 않는 것으로 생각됩니다.

 

해결책으로는, 아래와 같이 <table style="word-break: break-all;"> 스타일 속성으로 강제로 줄 바꿈을 하는 것입니다.

 

<table width="200" border="1" cellspacing="0" cellpadding="0" style="word-break: break-all;">
    <tr>
        <td width="100">abcdefghijklmnopqrstuvwxyz</td>
        <td width="100">&nbsp;</td>
    </tr>
</table>

 

word-break는 행의 줄 바꿈하는 방법을 지정하는 데 사용하는 속성으로 아직 CSS 표준은 아니지만, CSS3 스펙에는 포함되어 있으므로 표준 속성이 될 가능성이 많습니다. 인터넷 익스플로러와 구글 크롬 등의 브라우저에서는 이 속성을 지원하지만 아직 FireFox 등의 브라우저에서는 이 속성을 지원하지 않으므로 자동 줄 바꿈이 되지 않습니다.

출처 : 네이버 지식IN