rotate table header cell 90 degree
HTML CSS JavaScript
Switch branches/tags
Nothing to show
Clone or download
Heinz Heinz
Heinz and Heinz added leader as tag001 data
Latest commit df083c2 May 31, 2017
Permalink
Failed to load latest commit information.
css No commit message Nov 10, 2014
icons No commit message Nov 10, 2014
js added leader as tag001 data May 31, 2017
nbproject No commit message Nov 10, 2014
LICENSE.md Update LICENSE.md Apr 1, 2014
README.md added leader as tag001 data May 31, 2017
index.html No commit message Mar 31, 2014
main.css No commit message Mar 31, 2014
sea.JPG No commit message Mar 31, 2014

README.md

vertical

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
    call rotateHeadCell('tab1');

Logic

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.