'table'에 해당되는 글 2건
- 2017.01.12 Table 자동 rowspan 처리 jQuery plugin
- 2014.05.20 HTML 테이블 높이 100% 맨들기 2
Table 자동 rowspan 처리 jQuery plugin
요렇게 Table에서 rowspan 을 처리해주는게 필요해서 관련 훌러그인이 있나 찾아 보다가 어떤 친절한 사람이 github에 만들어 놓은것을 발견하였다.
https://github.com/marcosesperon/jquery.rowspanizer.js
하지만 살짝 문제가 있었는데
어떤 특정컬럼에 대해 rowspan 할지 지정하는 옵션이 없어서 모든 td 들에 대해서 rowspan 을 해버리는게 쪼금 아쉬웠다.
나는 특정 컬럼에만 적용하고 싶었는데... 뭐 어쩌나~ 그 친절한 사람이 만들어 놓은 훌러그인을 살짝 수정했다.
본의 아니게 친절한 분의 깔끔한 소스코드에 나의 더러운 코드를 쪼금 넣었다.
사용법은 기존대로 요렇게 하면 모든 컬럼에 대해서 적용하는 것이고
$("#target-table").rowspanizer();
1, 2, 5번째 컬럼에 대해서 적용하려면 요렇게 하면 된다.
$("#target-table").rowspanizer({ cols : [0, 1, 4], vertical_align: "middle" });
'jQuery Plugin' 카테고리의 다른 글
jQuery를 이용한 스크롤 따라니는 배너를 쉽게 맨들기(scroll follow) (3) | 2012.05.29 |
---|---|
자작 훌러그인 : jQuery shortcut v0.1 (웹페이지에 단축키 기능을 넣자) (5) | 2011.11.18 |
자작 훌러그인 : jQuery blingHover v0.1 (링크 롤오버시 텍스트 컬러를 보드랍게 바꿔주기-_-) (0) | 2011.11.07 |
jQuery datepicker 팝업창 사이즈 바꾸기 (3) | 2011.11.06 |
jQuery UI datepicker z-index 때문에 datepicker 가 뽓 나타나지 않을때 해결하기 (1) | 2011.11.06 |
HTML 테이블 높이 100% 맨들기
뭐 하나 수정할게 있어서 소스를 보니 무려 HTML DOCTYPE 이 없고, 레이아웃이 table로 되 있었다. -.-
대충 요대로 두고 조금 수정하고 끝내려니까 레이아웃이 훅 깨져버려 결국 DOCTYPE을 추가하고 이것저것 군데군데 소스를 꽤 수정했다.
DOCTYPE을 추가해서 훅 바뀐것 중에 하나가 전체 레이아웃을 맹글고 있는 맨 바깥 테이블 높이가 100%가 안되는 것이였다.
기냥 다시 원상복구 할려다가 고친게 아까워서 검색을 해보니 역시 똘똘한 사람들이 많았다.
아무튼 테이블 높이를 100% 로 할려면
요렇게 html, body 스타일에 height: 100% 를 적용시켜 주고 해당 테이블 스타일에 height:100% 를 추가해 주면 된다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> html, body{ height:100%; margin:0px; } </style> </head> <body> <table style="height:100%; width:100%;"> <tr> <td style="text-align:center;"> 100% 테이블 높이 </td> </tr> </table> </body> </html>
※ DOCTYPE 이 없으면 IE 개발자도구로 보면 문서모드가 쿼크 모드로 보인다. 중요한 DOCTYPE을 안 넣다니 -.-
※ 제발 코딩할때 들여쓰기 좀 했으면 좋겠다. -_- 들여쓰기만 잘해도 소스가 있어보인다 -.-
'CSS' 카테고리의 다른 글
table cellspacing, cellpadding 속성을 css 로 처리하기 (1) | 2011.11.12 |
---|