Language
한국어

[awesome table] CSS 적용하기

2017.04.06 23:24

lispro06 조회 수:636

구글 awesome table 기본 css 는 처음에 깔끔하긴 하지만, 역시 동일하게 적용하면 기술적으로 복사해서만 구현한 것 같다.


이를테면, XE 기본 템플릿, 전자정부프레임워크의 기본 스타일로 적용된 페이지는 노력이 덜 들어간 느낌이다.


구글도 이를 인지했는지, 어렵지만, CSS 를 적용하는 방법을 지원한다.


개인적으로 사용한 것은 필터 부분의 버튼 색을 흰색으로 바꾸고 크기를 줄인 것이다.


기본 테이블 헤더의 정렬과, 내용(td) 부분 정렬 방식을 지정하여, 조금 더 출력이 일괄 가운데 정렬보다는 심혈을 기울인 듯한 모습을 보인다.


* awesome table gadget 의 4번째 탭(Advenced Parameter)의 templates range 에서 영역을 설정하고, 1행은 <style> 이라고 하면 된다.(해당 내용은 여기서 다루지 않음)


.awt-vis-controls-csvFilter .awt-csvFilter-button {background:#ffffff;}

.google-visualization-table-table th {text-align:center;}

.google-visualization-table-table td {padding-left:12pt;text-align:justify;max-width:150px;}

.awt-vis-controls-csvFilter .awt-csvFilter-dropdown-menu {min-width:100px;}

.awt-vis-controls-csvFilter .awt-csvFilter {min-width:100px;}


추가적으로 전체 헤더 색을 지정하는 부분이다. 원래는 회색인데, 푸른색 계열로 적용하면 hover 색이랑 약간 비슷하긴 하지만, 통일감도 있고, 흑백 느낌을 줄여준다.

.google-visualization-table-table .gradient,

.google-visualization-table-div-page .gradient {

        background: #82b6f7 !important;

}