I have wrapped some header into two line using this.
.slick-column-name { white-space: normal; }
.slick-header-column.ui-state-default{ height:30px; vertical-align:middle;}
But the single line headers stays on top of the cell. Is there any way to vertically align these "single line" headers into center?
Did you mind like this:
.slick-column-name { white-space: normal; display: table-cell; vertical-align:middle; height: 100px; background: red; }
.slick-header-column.ui-state-default{ height:30px; line-height:30px; }
Here the demo: http://jsfiddle.net/xJUMv/