2개의 테이블을 고정폭으로 가로로 배치하는 방법
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> <body> <div id='test-table'> <table> <tr><td>long long string</td></tr> <tr><td>2</td></tr> </table> <table> <tr><td>1</td></tr> <tr><td>2</td></tr> </table> <table> <tr><td>1</td></tr> <tr><td>2</td></tr> </table> </div> </body> </html> | cs |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | #test-table { border: 1px solid #00f; width: 210px; } #test-table table { border: 1px solid #f00; table-layout:fixed; width: 100px; } #test-table table:nth-child(odd) { float:left; } #test-table td { border: 1px solid #f00; white-space:nowrap; overflow: hidden; text-overflow: ellipsis; } #test-table:after { content: ''; display: block; clear: left; } | cs |
테이블의 크기에 맞춰서 td 요소의 텍스트는 줄임표시하도록 하였습니다.
table
table-layout 속성으 fixed로 하여 테이블 내부 요소 크기에 따라 자동으로 늘어나는것을 막습니다.
왼쪽에 위치하는 테이블(홀수 번째 1,3,5,...)에 float:left 속성을 지정하여 다음으로 오는 테이블을 같은 행에 배치합니다.
td
td 요소에 white-space:nowrap 속성을 지정하여 텍스트가 늘어나더라도 자동개행을 하지 않도록 합니다.
overflow:hidden 속성을 지정하여 td 크기를 넘어가는 부분은 보이지 않도록 합니다.
text-overflow: ellipsis 속성으로 텍스트의 말줄임표를 표시합니다.
:after 가상선택자
float:left를 사용해서 요소를 float 하였기 때문에 부모 div 높이에 table 요소들의 높이가 정상적으로 반영되지 않습니다. 따라서 div에 after 가상선택자를 이용해 display를 block으로 지정하고 clear: both 속성으로 양쪽에 float 을 모두 지워줍니다. (clear:left만 해도 됩니다)
http://naradesign.net/wp/2008/05/27/144/
http://www.beautifulcss.com/archives/787
'프로그래밍 > HTML, CSS' 카테고리의 다른 글
| 공통선택자(*)의 효율과 Reset CSS (0) | 2013.01.14 |
|---|---|
| NHN NURI CSS Guideline : 필요한 부분만 정리 (0) | 2013.01.14 |
| 웹 표준 핵심 가이드북 : 폼 관련 요소 (0) | 2013.01.13 |
| 웹 표준 핵심 가이드북 : 웹 접근성, 웹 표준 요약 (0) | 2013.01.13 |
| 실전 웹 표준 가이드 : CSS 레이아웃 (0) | 2013.01.11 |
댓글 로드 중…