Header not scrollable when using "scrollX: true"

nddery

Trying to scroll the table while your cursor is on the table scrollHead, it won't work. For it to work, you need to have your cursor over the table scrollBody.

Here's an example on JSFiddle where you can see the problem: http://live.datatables.net/pikifuqu/1/edit

nddery

An easy workaround is to add the following CSS (assuming that .dataTables_scrollHead is 50px tall):

// `.dataTables_scrollHead` is 50px tall
.dataTables_scrollBody {
  padding-top: 50px;
  margin-top: -50px;
}

However, you loose column ordering capability, and if the columns change width, which in turn affect height of the header row, this code won't update..