SlickGrid의 스타일을 지정하는 데 권장되는 방법은 무엇입니까?

Question

저는 SlickGrid를 사용하기 시작했으며 그 품질에 놀랐습니다. 그러나 스타일링에 관해서는 전반적인 스타일링 접근법을 권장하는 문서 나 예제를 찾지 못했습니다. 여러 곳에서 옵션과 API가 흩어져 있지만 전략에서 추출하는 것은 매우 어렵습니다. 또한 그리드는 jQuery UI 테마를 활용합니다. 불행히도 그것들은 제가 성취하려는 것을 방해하고 있습니다. 우리는 ui-darkness 테마와 함께 캘린더 위젯에 대해서만 jQuery UI를 선택했습니다. 이 테마는 캘린더 위젯에 완벽하게 잘 작동하지만 그리드는 모든 위젯을 오버라이드해야합니다.

다음은 달성하고자하는 모습을 보여주는 jsFiddle입니다. http://jsfiddle.net/nareshbhatia/3q6RD/. 단지 일러스트레이션을 위해 일반 HTML 표를 사용합니다. 그러나 나는 SlickGrid를 사용하여 똑같은 스타일링을하고 싶습니다. 이 jsFiddle의 CSS는 본질적으로 필자의 시각적 디자이너가 가진 요구 사항입니다.

#positions-table th { 
    background-color: #505050; 
    color: #eeeeee; 
    text-shadow: none; 
    font-size: 13px; 
    height: 40px; 
    line-height: 40px; 
} 

편집 :은 또한 선발 SlickGrid 구현으로 jsFiddle을 만들어 : http://jsfiddle.net/nareshbhatia/vJshY/. 보시다시피, ui-darkness 테마가 완전히 대신되었습니다!

Answer 1

은 마지막/초 jsFiddle 내에서이 코드를 @ghiscoding

.slick-header-column.ui-state-default { 
    background:none ; 
    background-color: #505050 ; 
    color: #eeeeee; 
    border: none; 
    padding: 0; 
    text-shadow: none; 
    font-family: Arial, Verdana, Helvetica, sans-serif; 
    font-size: 13px; 
    height: 40px; 
    line-height: 40px;  
} 

.slick-row.ui-widget-content, .slick-cell { 
    background: none; 
    background-color: #eeeeee; 
    color: #666666; 
    border: none; 
    border-bottom: solid 1px #ffffff; 
    font-size: 14px; 
    height: 60px; 
    line-height: 60px; 
    padding: 0 5px; 
}