tbody scroll for IE

by ofir

http://www.webdeveloper.com/forum/showthread.php?t=92584

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

<html>
<
head>
<
meta httpequiv=“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, sansserif;
}

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

thead tr th, tfoot tr th{
backgroundcolor: #996600;
}

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

.scrollTable{ width:100% }

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

.scrollTable .th_extra{
width: 18px;
padding: 0;
borderrightwidth: 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.offsetWidth17);}
.
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>

Advertisements

3 Responses to “tbody scroll for IE”

  1. t Says:

    its nice but the scrollbar is obscured by the THEAD now. the expression in IE only code doesnt fix that either.

  2. Mahendra Says:

    it is not working for Firefox. do you have solution for Firefox

  3. Mahendra Says:

    great one but this solution is not working for mozila FireFox.
    do you have any solution

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: