Tbody scroll, Fixed Thead, Text Sizing Breaks in IE
I've found a table example online that suites my needs of having a xbrowser 'tbody' scroll while the thead stays in place. Unfortunately, the thead misaligns when font size is increased or decreased in IE. Can anyone suggest a fix?
***
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type='text/css' >
.windowDataScroll {border: 2px solid #cccccc;}
.dataScroll thead {background-color: #f4f4f4;}
.dataScroll th, .dataScroll td{padding: 5px 3px; text-align: left; border-bottom: 1px solid #cccccc;}
.dataScroll{ width:100%;}
.dataScroll > tbody{height:200px !important; overflow:auto; overflow-x: hidden;}
.dataScroll > tbody.scrollContent tr {height:15px;}
.dataScroll .th_extra {width: 18px; padding: 0; border-right-width: 0;}
.windowDataScroll > .dataScroll .th_extra{ width: 19px;}
</style>
<!--[if IE]>
<style type="text/css">
div.windowDataScroll {height: 200px; overflow-y: scroll; overflow: hidden; width: 99.25%; } /*overflow: auto;*/
thead.fixedHeader tr {position: relative;}
.dataScroll{width: expression(this.parentNode.offsetWidth-20);}
.th_extra {display:none;}
</style>
<![endif]-->
</head>
<body>
<div class="windowDataScroll">
<table border='0' cellspacing='0' cellpadding='0' class="dataScroll">
<thead class="fixedHeader">
<tr>
<th>wkdjchlkj</th>
<th>khwdgc9376</th>
<th>76235uyg</th>
<th>yg</th>
<th class='th_extra'></th>
</tr>
</thead>
<tbody class="scrollContent">
<tr>
<td>1115551111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444fjdkal;j fieo;aj fdkla;jfdk ;jk;</td>
</tr>
<!--15 more rows-->
</tbody>
</table>
</div>
</body>
</html>
CSS Codes
Reply With Quote
Originally Posted by Snookerman
Bookmarks