CSS Hack
* html div.tableContainer { /* IE only hack */
width:95%;
border:1px solid #ccc;
height: 285px;
overflow-x:hidden;
overflow-y: auto;
}
* html div.tableContainer table thead tr td,
* html div.tableContainer table thead tr th{
/* IE Only hacks */
position:relative;
top:expression(dojo.html.getFirstAncestorByTag(this,'table').parentNode.scrollTop);
}
html>body tbody.scrollContent {
height: 262px;
overflow-x:hidden;
overflow-y: auto;
}
tbody.scrollContent td, tbody.scrollContent tr td {
background: #FFF;
padding: 2px;
}
tbody.scrollContent tr.alternateRow td {
background: #e3edfa;
padding: 2px;
}
<div class="tableContainer">
<table dojoType="SortableTable" widgetId="testTable" headClass="fixedHeader" tbodyClass="scrollContent" ...>
<thead>
It is excerpted from dojo sortableTable test file, since IE doesn't support overflow(scrollbar) on tbody, it plays a trick by wrapping a scrollable div around table, and relatively position the thead to simulate the effect.
* html only visible to IE, and child selector html>body not visible to IE. Also note that the descendant selector is applied above.
No comments:
Post a Comment