Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login


Tycoon Talk > Web Development and Programming Support > CSS Forum > scrollable table with fixed columns and headers scroll too slow in IE.

Reply
scrollable table with fixed columns and headers scroll too slow in IE.
Old 07-10-2006, 02:10 AM scrollable table with fixed columns and headers scroll too slow in IE.
Junior Talker

Posts: 2
Trades: 0
Talkupation: georgelkh is on a distinguished road
Dear all,

I am new to CSS.

Recently, I used CSS to build a table-liked web report with the top column header and the left-most column fixed. But I find the scrolling(vertical and horizontal) is very very slow and use up most of my CPU time.

Can you experts help me and give me some hints ?


Thanks
George

Following is my css code:
************************************************** ****
<style type="text/css">
<!--
/* begin some basic styling here */
body {
background: #FFF;
color: #000;
font: normal normal 10px Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0
}
table, td, a {
color: #000;
font: normal normal 10px Verdana, Geneva, Arial, Helvetica, sans-serif
}
div#tbl-container {
width: 750px;
height: 530px;
overflow: auto;
scrollbar-base-color:#C9C299;
}
div#tbl-container tr.normalRow td {
background: #fff;
padding: 4px 4px 4px 4px;
font-size: 10px;
}
div#tbl-container tr.alternateRow td {
background: #AFDCEC;
padding: 4px 4px 4px 4px;
font-size: 10px;
}
div#tbl-container table {
table-layout: fixed;
border-collapse: collapse;
background-color: WhiteSmoke;
}
div#tbl-container table th {
width: 100px;
}
div#tbl-container thead th, div#tbl-container thead th.locked {
font-size: 10px;
font-weight: bold;
text-align: center;
background-color: #2B3856;
color: white;
position:relative;
cursor: default;
}

div#tbl-container thead th {
top: expression(document.getElementById("tbl-container").scrollTop-2); /* IE5+ only */
z-index: 20;
}
div#tbl-container thead th.locked {z-index: 30;}
div#tbl-container td.locked, div#tbl-container th.locked{
background-color: #ffeaff;
font-weight: bold;
left: expression(document.getElementById("tbl-container").scrollLeft); /* IE5+ only */
position: relative;
z-index: 10;
}
-->
</style>
************************************************** ****

Following is my html code:
###########################################
<body>

<div id="tbl-container">
<table id="tbl">
<thead class="fixedHeader">
<tr>
<th class="locked">Location</th>
<th class="locked">Product Line</th>
<th>POS(MTD)</th>
<th>Onhand Stock</th>
<th>Intransit Stock</th>
<th>Delinquent SO</th>
<th>Current Open SO</th>
<th>Current Scheduled SO</th>
<th>Delinquent PO</th>
<th>Current Open PO
<th>Current Scheduled PO</th>
<th>Current Expected Stock</th>
<th>Next Open SO</th>
<th>Next Scheduled SO</th>
<th>Next Open PO</th>
<th>Next Scheduled PO</th>
<th>Next Expected Stock</th>
<th>2nd Next Open SO</th>
<th>2nd Next Scheduled SO</th>
<th>2nd Next Open PO</th>
<th>2nd Next Scheduled PO</th>
<th>2nd Next Expected Stock</th>
</tr>
</thead>

<tbody>

<tr class="alternateRow">
<td align=left style="background:#C9C299" class="locked">CHK</td>
<td align=right style="background:#C9C299" class="locked">1</td>
<td align=right>0.00</td>
<td align=right>10,146,396.43</td>
<td align=right>1,548.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>21,886,146.45</td>
<td align=right>560,189.00</td>
<td align=right>0.00</td>
<td align=right>10,147,944.43</td>
<td align=right style="background:#F9B7FF;">0.00</td>
<td align=right style="background:#F9B7FF;">0.00</td>
<td align=right style="background:#F9B7FF;">0.00</td>
<td align=right style="background:#F9B7FF;">0.00</td>
<td align=right style="background:#F9B7FF;">10,147,944.43</td>
<td align=right style="background:#B5EAAA;">0.00</td>
<td align=right style="background:#B5EAAA;">0.00</td>
<td align=right style="background:#B5EAAA;">0.00</td>
<td align=right style="background:#B5EAAA;">0.00</td>
<td align=right style="background:#B5EAAA;">10,147,944.43</td>
</tr>


<tr class="normalRow">
<td align=left class="locked">CHK</td>
<td align=right class="locked">2</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
</tr>

<tr class="alternateRow">
<td align=left style="background:#C9C299" class="locked">CHK</td>
<td align=right style="background:#C9C299" class="locked">2</td>
<td align=right>0.00</td>
<td align=right>0.95</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>5,070.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.95</td>
<td align=right style="background:#F9B7FF;">0.00</td>
<td align=right style="background:#F9B7FF;">0.00</td>
<td align=right style="background:#F9B7FF;">0.00</td>
<td align=right style="background:#F9B7FF;">0.00</td>
<td align=right style="background:#F9B7FF;">0.95</td>
<td align=right style="background:#B5EAAA;">0.00</td>
<td align=right style="background:#B5EAAA;">0.00</td>
<td align=right style="background:#B5EAAA;">0.00</td>
<td align=right style="background:#B5EAAA;">0.00</td>
<td align=right style="background:#B5EAAA;">0.95</td>
</tr>


<tr class="normalRow">
<td align=left class="locked">CHK</td>
<td align=right class="locked">3</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
</tr>

<tr class="alternateRow">
<td align=left style="background:#C9C299" class="locked">CHK</td>
<td align=right style="background:#C9C299" class="locked">3</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right style="background:#F9B7FF;">0.00</td>
<td align=right style="background:#F9B7FF;">0.00</td>
<td align=right style="background:#F9B7FF;">0.00</td>
<td align=right style="background:#F9B7FF;">0.00</td>
<td align=right style="background:#F9B7FF;">0.00</td>
<td align=right style="background:#B5EAAA;">0.00</td>
<td align=right style="background:#B5EAAA;">0.00</td>
<td align=right style="background:#B5EAAA;">0.00</td>
<td align=right style="background:#B5EAAA;">0.00</td>
<td align=right style="background:#B5EAAA;">0.00</td>
</tr>


<tr class="alternateRow">
<td align=left style="background:#C9C299" class="locked">CHK</td>
<td align=right style="background:#C9C299" class="locked">0</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right style="background:#F9B7FF;">0.00</td>
<td align=right style="background:#F9B7FF;">0.00</td>
<td align=right style="background:#F9B7FF;">0.00</td>
<td align=right style="background:#F9B7FF;">0.00</td>
<td align=right style="background:#F9B7FF;">0.00</td>
<td align=right style="background:#B5EAAA;">0.00</td>
<td align=right style="background:#B5EAAA;">0.00</td>
<td align=right style="background:#B5EAAA;">0.00</td>
<td align=right style="background:#B5EAAA;">0.00</td>
<td align=right style="background:#B5EAAA;">0.00</td>
</tr>
<tr class="normalRow">
<td align=left class="locked">CHK</td>
<td align=right class="locked">J</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
</tr>

<tr class="alternateRow">
<td align=left style="background:#C9C299" class="locked">CHK</td>
<td align=right style="background:#C9C299" class="locked">K</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right style="background:#F9B7FF;">0.00</td>
<td align=right style="background:#F9B7FF;">0.00</td>
<td align=right style="background:#F9B7FF;">0.00</td>
<td align=right style="background:#F9B7FF;">0.00</td>
<td align=right style="background:#F9B7FF;">0.00</td>
<td align=right style="background:#B5EAAA;">0.00</td>
<td align=right style="background:#B5EAAA;">0.00</td>
<td align=right style="background:#B5EAAA;">0.00</td>
<td align=right style="background:#B5EAAA;">0.00</td>
<td align=right style="background:#B5EAAA;">0.00</td>
</tr>


<tr class="normalRow">
<td align=left class="locked">CHK</td>
<td align=right class="locked">L</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
</tr>

<tr class="alternateRow">
<td align=left style="background:#C9C299" class="locked">CHK</td>
<td align=right style="background:#C9C299" class="locked">M</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right style="background:#F9B7FF;">0.00</td>
<td align=right style="background:#F9B7FF;">0.00</td>
<td align=right style="background:#F9B7FF;">0.00</td>
<td align=right style="background:#F9B7FF;">0.00</td>
<td align=right style="background:#F9B7FF;">0.00</td>
<td align=right style="background:#B5EAAA;">0.00</td>
<td align=right style="background:#B5EAAA;">0.00</td>
<td align=right style="background:#B5EAAA;">0.00</td>
<td align=right style="background:#B5EAAA;">0.00</td>
<td align=right style="background:#B5EAAA;">0.00</td>
</tr>


<tr class="normalRow">
<td align=left class="locked">CHK</td>
<td align=right class="locked">N</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
</tr>

<tr class="alternateRow">
<td align=left style="background:#C9C299" class="locked">CHK</td>
<td align=right style="background:#C9C299" class="locked">O</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right>0.00</td>
<td align=right style="background:#F9B7FF;">0.00</td>
<td align=right style="background:#F9B7FF;">0.00</td>
<td align=right style="background:#F9B7FF;">0.00</td>
<td align=right style="background:#F9B7FF;">0.00</td>
<td align=right style="background:#F9B7FF;">0.00</td>
<td align=right style="background:#B5EAAA;">0.00</td>
<td align=right style="background:#B5EAAA;">0.00</td>
<td align=right style="background:#B5EAAA;">0.00</td>
<td align=right style="background:#B5EAAA;">0.00</td>
<td align=right style="background:#B5EAAA;">0.00</td>
</tr>
</tbody>
</table>
</div>
</body>
###########################################
georgelkh is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 07-10-2006, 02:37 AM Re: scrollable table with fixed columns and headers scroll too slow in IE.
Junior Talker

Posts: 2
Trades: 0
Talkupation: georgelkh is on a distinguished road
Dear all,

As more rows are added to the tables, the scrolling will be slower.

thanks
George
georgelkh is offline
Reply With Quote
View Public Profile
 
Old 07-03-2007, 05:23 PM Re: scrollable table with fixed columns and headers scroll too slow in IE.
Junior Talker

Posts: 1
Trades: 0
Talkupation: paisley is on a distinguished road
The slowness is due to this line:

left: expression(document.getElementById("tbl-container").scrollLeft);

I also have this attribute set for implementing fixed columns, and I get a spike in the CPU by about 50% when I mouse over the table.

Did you ever find a solution?
paisley is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to scrollable table with fixed columns and headers scroll too slow in IE.
 
Previous Thread | Next Thread Tycoon Talk > Web Development and Programming Support > CSS Forum > scrollable table with fixed columns and headers scroll too slow in IE.

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off




   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 1.29322 seconds with 12 queries