I have a page with a div containing a large table of data. The div has the overflow values of \[code\]overflow-x:hidden;overflow-y:scroll;\[/code\] Instead of the page scrolling you just scroll using this div's scrollbar. However the table header (thead) is fixed and stays at the top of the div when you scroll, but it covers the scrollbar.
I want the table header to be 100% of the div with the scrollbar but I want it to act like the rest of the table and not cover the scrollbar.
I have tested this in Chrome, Firefox and IE9 and they all look the same!
HTML\[code\] <div style='position:absolute;bottom:0;height:396px;width:100%;overflow-y:scroll;overflow-x:hidden;'> <table id='select-customer-results' style='margin-top:-1px;position:fixed;width:100%;'> <tr> <th style='width:15%;'>Code</th> <th style='width:85%;'>Name</th> </tr> </table> <div style='height:37px;'></div> <table id='select-customer-results'> <!--A lot of rows!--> </table> </div>\[/code\]?CSS\[code\]table#select-customer-results{ width:100%; margin-top:-5px;}table#select-customer-results tr{ border-bottom:1px solid #797979;}table#select-customer-results tr:nth-child(even){ background:#EBF2F7;}table#select-customer-results td,table#select-customer-results th{ font-family:Helvetica, Arial, sans-serif; padding:5px; border:1px solid #797979; }table#select-customer-results td{ cursor
ointer; }table#select-customer-results tr.clickable:hover{ background-color:#BCC2C6;}table#select-customer-results th{ color:#FFF; padding:7px; padding-top:10px; font-weight:bold; text-align:left; box-shadow:0 2px 3px 0 #474747; -webkit-box-shadow:0 2px 3px 0 #474747; -moz-box-shadow:0 2px 3px 0 #474747; background: #878787; background: -moz-linear-gradient(top, #878787 0%, #6E6E6E 50%, #5C5C5C 51%, #7B7B7B 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#878787), color-stop(50%,#6E6E6E), color-stop(51%,#5C5C5C), color-stop(100%,#7B7B7B)); background: -webkit-linear-gradient(top, #878787 0%,#6E6E6E 50%,#5C5C5C 51%,#7B7B7B 100%); background: -o-linear-gradient(top, #878787 0%,#6E6E6E 50%,#5C5C5C 51%,#7B7B7B 100%); background: -ms-linear-gradient(top, #878787 0%,#6E6E6E 50%,#5C5C5C 51%,#7B7B7B 100%); background: linear-gradient(to bottom, #878787 0%,#6E6E6E 50%,#5C5C5C 51%,#7B7B7B 100%); filter: progid
XImageTransform.Microsoft.gradient( startColorstr='#878787', endColorstr='#7B7B7B',GradientType=0 );}?\[/code\]Here is the example on jsfiddle: http://jsfiddle.net/Q3sbp/
I want the table header to be 100% of the div with the scrollbar but I want it to act like the rest of the table and not cover the scrollbar.
I have tested this in Chrome, Firefox and IE9 and they all look the same!
HTML\[code\] <div style='position:absolute;bottom:0;height:396px;width:100%;overflow-y:scroll;overflow-x:hidden;'> <table id='select-customer-results' style='margin-top:-1px;position:fixed;width:100%;'> <tr> <th style='width:15%;'>Code</th> <th style='width:85%;'>Name</th> </tr> </table> <div style='height:37px;'></div> <table id='select-customer-results'> <!--A lot of rows!--> </table> </div>\[/code\]?CSS\[code\]table#select-customer-results{ width:100%; margin-top:-5px;}table#select-customer-results tr{ border-bottom:1px solid #797979;}table#select-customer-results tr:nth-child(even){ background:#EBF2F7;}table#select-customer-results td,table#select-customer-results th{ font-family:Helvetica, Arial, sans-serif; padding:5px; border:1px solid #797979; }table#select-customer-results td{ cursor
ointer; }table#select-customer-results tr.clickable:hover{ background-color:#BCC2C6;}table#select-customer-results th{ color:#FFF; padding:7px; padding-top:10px; font-weight:bold; text-align:left; box-shadow:0 2px 3px 0 #474747; -webkit-box-shadow:0 2px 3px 0 #474747; -moz-box-shadow:0 2px 3px 0 #474747; background: #878787; background: -moz-linear-gradient(top, #878787 0%, #6E6E6E 50%, #5C5C5C 51%, #7B7B7B 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#878787), color-stop(50%,#6E6E6E), color-stop(51%,#5C5C5C), color-stop(100%,#7B7B7B)); background: -webkit-linear-gradient(top, #878787 0%,#6E6E6E 50%,#5C5C5C 51%,#7B7B7B 100%); background: -o-linear-gradient(top, #878787 0%,#6E6E6E 50%,#5C5C5C 51%,#7B7B7B 100%); background: -ms-linear-gradient(top, #878787 0%,#6E6E6E 50%,#5C5C5C 51%,#7B7B7B 100%); background: linear-gradient(to bottom, #878787 0%,#6E6E6E 50%,#5C5C5C 51%,#7B7B7B 100%); filter: progidXImageTransform.Microsoft.gradient( startColorstr='#878787', endColorstr='#7B7B7B',GradientType=0 );}?\[/code\]Here is the example on jsfiddle: http://jsfiddle.net/Q3sbp/