rotated table headers

TTom911

Hi. I am new to Datatables, I am using it in the "Metronic" Admin template (Bootstrap):
http://keenthemes.com/preview/metronic/theme/admin_2/table_datatables_editable.html

I need to rotate the table headers 45 degree because the text is too long to fit horizontally. (I would use it in Webview in Android and iOS / Safari and Chrome. Firefox and IE not important in my case).

How can I do that?

Thanks

allan

Its not trivial unfortunately. Basically what you need to do is transform the header using something like:

table thead th {
      transform: rotate(-45deg);
      transform-origin: top left;
}

You'll also have to remove the overflow from your .table-scrollable element.

Other changes to the thead border will probably also be required.

It is not something that is explicitly supported by DataTables, however, if you Google for how to do it with a plain HTML table, that should also work with DataTables.

Allan