javascript - CSS - column heading rotation as well as fixed header when scrolling -
i've been trying display table needs have column headings rotated, stay top of page when user scrolls down. can kind of working, issue width of columns. think there's issue css. scrolling of header works using separate js file.
this page looks @ moment. i've coloured different elements can demonstrate issue. 
the column heading text (the green parts below) in div class called rotated_text. cell (the red parts below) has class called rotated_cell.
the issue can't seem width of columns shrink , fit values inside (the green part), , can't green part extend way cell (some of values on 2 "lines" can see).
i'd output (done using excel file it's how i'd look):
my code below:
.normalheadingtext { padding: 2px; text-align: center; } .rotated_text { -moz-transform:rotate(-90deg); -moz-transform-origin: top left; -webkit-transform: rotate(-90deg); -webkit-transform-origin: top left; -o-transform: rotate(-90deg); -o-transform-origin: top left; position:relative; text-align: left; top:20px; width:100px; padding: 0px 0px 0px 0px; background-color:#a1d490; } .rotated_cell { height:250px; vertical-align:bottom; padding: 0px 0px 10px 0px; background-color:#d4a190; } th, td { border: 1px solid #888888; /*width: 20px;*/ } .columnheadingnormal { font-weight: bold; border: 1px solid black; } .cellnormal { border: 1px solid #888888; } .cellnamesize { width:230px; } .reporttable { width: 100%; border-collapse: separate; border-spacing: 0px; }<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>report</title> </head> <body> <h1>title</h1> <table class='reporttable'> <thead> <tr class='header'> <th class='columnheadingnormal cellnamesize'>name</th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>allcorn, mason</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>armstrong, bree</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>barmby, matthew</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>barnett, brydon</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>bartlett, patrick</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>bell, chris</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>benson, oliver</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>bisinella, tiana</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>bowen, joshua</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>brayshaw, james</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>brew, alana</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>brogden, bailey</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>buckley, matthew</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>burns, hayden</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>cain, jack</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>cannard, patrick</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>crapper, josh</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>davison, olivia</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>dean, darryl</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>debeljuh, natalie</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>dickson, eric</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>doolan, briane</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>draper, flynn</div></th> </tr> </thead> <tbody> <tr> <td class='cellnormal'>johnstone, william</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> </tr> <tr> <td class='cellnormal'>johnstone, william</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> </tr> <tr> <td class='cellnormal'>johnstone, william</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> </tr> <tr> <td class='cellnormal'>johnstone, william</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> </tr> </tbody> </table> <br /> <br /> <br /> </body> </html>can point out i'm doing wrong css/html?
you have set text position: absolute; , remove top: 20px;. added height: 7%;
.normalheadingtext { padding: 2px; text-align: center; } .rotated_text { -moz-transform:rotate(-90deg); -moz-transform-origin: top left; -webkit-transform: rotate(-90deg); -webkit-transform-origin: top left; -o-transform: rotate(-90deg); -o-transform-origin: top left; position:relative; text-align: left; width:100px; padding: 0px 0px 0px 0px; background-color:#a1d490; position: absolute; height: 7%; } .rotated_cell { height:250px; vertical-align:bottom; padding: 0px 0px 0px 0px; background-color:#d4a190; } th, td { border: 1px solid #888888; /*width: 20px;*/ } .columnheadingnormal { font-weight: bold; border: 1px solid black; } .cellnormal { border: 1px solid #888888; } .cellnamesize { width:230px; } .reporttable { width: 100%; border-collapse: separate; border-spacing: 0px; }<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>report</title> </head> <body> <h1>title</h1> <table class='reporttable'> <thead> <tr class='header'> <th class='columnheadingnormal cellnamesize'>name</th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>allcorn, mason</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>armstrong, bree</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>barmby, matthew</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>barnett, brydon</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>bartlett, patrick</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>bell, chris</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>benson, oliver</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>bisinella, tiana</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>bowen, joshua</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>brayshaw, james</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>brew, alana</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>brogden, bailey</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>buckley, matthew</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>burns, hayden</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>cain, jack</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>cannard, patrick</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>crapper, josh</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>davison, olivia</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>dean, darryl</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>debeljuh, natalie</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>dickson, eric</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>doolan, briane</div></th> <th class='rotated_cell' colspan='1'><div class='rotated_text'>draper, flynn</div></th> </tr> </thead> <tbody> <tr> <td class='cellnormal'>johnstone, william</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> </tr> <tr> <td class='cellnormal'>johnstone, william</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> </tr> <tr> <td class='cellnormal'>johnstone, william</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> </tr> <tr> <td class='cellnormal'>johnstone, william</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> <td class='cellnormal'>0</td> </tr> </tbody> </table> <br /> <br /> <br /> </body> </html>
Comments
Post a Comment