tbody scroll for explorer

L

liunx

Guest
i wanted to make a TBODY scroll that works for both FF and IE.
in FF no probs, just: "height:300px;overflow:auto;" on the tbody and it works.

IE is a different story.
my problem began when i decided my table had to be flexibale !
all sulotions i found neede fixed width for the TDs - no good.

so i came up with this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>website</title>
<style type='text/css'>
body{
padding:0;
margin: 20px;
font: normal 13px arial, sans-serif;
}

table.TableMain{
border: 1px solid black;
}

thead tr th, tfoot tr th{
background-color: #996600;
}

.scrollTable th, .scrollTable td{
padding: 5px;
border: solid black;
border-width: 0 1px 1px 0;
}

.scrollTable{ width:100% }

.scrollTable > tbody{
height:300px;
overflow:auto;
}

.scrollTable .th_extra{
width: 18px;
padding: 0;
border-right-width: 0;
}

.TableContainer > .scrollTable .th_extra{ width: 19px; }

</style>
<!--[if IE]>
<style type="text/css">
div.TableContainer {
height: 300px;
overflow: auto;
width: 100%;
}

thead.fixedHeader tr {
position: relative;
}
.scrollTable{width: expression(this.parentNode.offsetWidth-17);}
.th_extra{display:none;}
</style>
<![endif]-->

</head>

<body>

<table border='0' cellspacing='0' cellpadding='0' class='TableMain' width='60%'>
<tr>
<td>
<div class="TableContainer">
<table border='0' cellspacing='0' cellpadding='0' class="scrollTable">
<thead class="fixedHeader">
<tr>
<th>wkdjchlkj</th>
<th>khwdgc9376</th>
<th>76235uyg</th>
<th>yg</th>
<th class='th_extra'></th>
</tr>
</thead>
<tfoot>
<tr>
<th>wkdjchlkj</th>
<th>khwdgc9376</th>
<th>76235uyg</th>
<th>7</th>
<th class='th_extra'></th>
</tr>
</tfoot>
<tbody class="scrollContent">
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
</tbody>
</table>
</div>

</td>
</tr>
</table>

</body>
</html>


this is the best i could think of.
i used an expression there bkuz otherwise the scroll is partlly hidden by the THEAD (ie of course).
delete the expression line to see.
and - when the most outer table (TableMain) dont have width to it the scroll is still hidden.

could u think of a better way? without the expression?hello?Internet Explorer doesn't support scrolling any table elements, I believe. So basically you're S.O.L. (S:eek:t Outta Luck).obviously u havent look what my code does.
i use an IE bug:
"In WinIE 6.x, any element with a position property set to relative and is a child of an element that has an overflow property set, the relative value translates into fixed."

please read my first post.Take out the expression and try it this way:tbody {display:block; display:table-row-group;} /* IE and FF */
 
You must log in or register to reply here.
Top