rotate table header cell 90 degree
As of 12 March 2015 this is working with IE11, Opera 28, FF 36 and Chrome 41. As of 31 MAy 2017 this is working with IE11, Edge, Opera 45, FF 53 and Chrome 58.
A demo is located at hgsweb.de/vertical
How to instrument your table:
- Give your tabel an ID like <table id=tab1>
- Add 'data-rotate' as an attribute to cells you want to rotate
like <th data-rotate>rotate </th> - include the given CSS class .hgs_rotate
- Add an event handler for the load event. Inside this handler
callrotateHeadCell('tab1');
The table is located using the given id.
If the first cell of a row is of type TH the
iteration looks for cells with a data attribute of data-rotate.
The content of these cells is wrapped within a DIV that has the
class .hgs_rotate assigned. This performs the rotation.
When rotating the content, the current width of the above DIV will become the new cell height.
The cell height for all cells will be set to the highest value found during iteration.
Using whitespace:nowrap allows to set the width of the enclosing div to the
original height of the content. This way the table cell will shrink down to this new width
if possible.