띄어쓰기가 없는 텍스트,
예를 들면 URL(https://www.google.co.kr/webhp?sourceid=chrome-instant&ion=1&espv=2&es_th=1&ie=UTF-8#newwindow=1&q=puseudo+class) 이나,
영문이 쭈욱 이어져있을경우 텍스트가 정해진 영역을 벗어나 테이블 레이아웃이 깨지는 경우가 발생한다.
HTML, CSS
<html> <head> <style> table {width:300px;height:50px;border-collapse:separate;border:1px solid #000;box-sizing:border-box;} td:first-child {width:200px;border-right:1px solid #000;} td:last-child {width:100px;} </style> </head> <body> <table> <tr> <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td> <td>bbbbbbbbbbb</td> </tr> </table> </body> </html>
브라우저 뷰확인
해결방안
이럴경우, table에 table-layout:fixed로 크기를 고정시켜주고, word-break속성으로 글자마다 떨어지게 하면 된다.
HTML, CSS
<html> <head> <style> table {width:300px;height:50px;border-collapse:separate;border:1px solid #000;box-sizing:border-box;table-layout:fixed;word-break:break-all;} td:first-child {width:200px;border-right:1px solid #000;} td:last-child {width:100px;} </style> </head> <body> <table> <tr> <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td> <td>bbbbbbbbbbb</td> </tr> </table> </body> </html>
브라우저 뷰확인
추가정보
이번에 진행중인 프로젝트에서 단말기 테스트를 하다보니, 아이폰에서는 table width:100%가 잘 먹지않는 경우가 있었다.
이 때도 역시 table-layout:fixed를 사용하면 해결된다.
'퍼블리싱 > CSS/CSS3' 카테고리의 다른 글
| :not(셀렉터) 사용하기 (0) | 2015.02.23 |
|---|---|
| background에만 opacity적용하기 (0) | 2014.11.21 |
| 웹폰트 @font-face (0) | 2014.11.14 |
| 유용한 CSS3 Generator 사이트 (0) | 2014.11.11 |
| CSS를 이용해서 checkbox 크기 조정하고 이미지처럼 꾸미기 (0) | 2014.09.25 |
