How to fix column in scrolling table?

Dear All

Please see below script & kindly advise me how can I fixed first column or more in this script. Kindly help me.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“content-type” content=“text/html; charset=ISO-8859-1” />

<script src=“http://1.2.3.4/bmi-int-js/bmi.js” language=“javascript”>
</script>

<title>Scrolling Table</title>
<style type=“text/css”>
table.dataTable{margin:0;padding:0;border-bottom:1px solid #999;border-left:1px solid #999;}
table.dataTable th{margin:0;border-right:1px solid #999;border-top:1px solid #999;font-weight:normal;padding:4px 3px 3px 4px;background:#ccc;font-weight:bold;}
table.dataTable td{margin:0;border-right:1px solid #999;border-top:1px solid #999;padding:2px 3px 3px 4px}
div.scrollTableContainer{height:285px;overflow:auto;width:1200px;margin:15px 0 0 0;position:relative;}
div.scrollTableContainer table{width:1200px;}
body div.scrollTableContainer table{width:1200px;}
body div.scrollTableContainer table>tbody{overflow:auto;height:250px;overflow-x:hidden;}
div.scrollTableContainer thead tr{position:relative;}
div.scrollTableContainer td:last-child{padding-right:20px;}
</style>

<style type=“text/css”>
</style>
<!–[if IE]>
<style type=“text/css”>

/* non-standard IE Specific Rules*/

div.scrollTableContainer thead tr {
/* Causes the pixel header row to stay fixed in IE*/
top: expression(offsetParent.scrollTop);
/* This fixes a strange bug in IE where the header row would “shift” 1px to
the right after the table was scrolled down. It would not shift back
after scrolling all the way, which made my first solution based on
offSetParent.scrollTop == 0 not an effective solution*/
left: expression(typeof(myvar) == ‘undefined’ ? 0+“px”+(myvar=‘true’) : -1+“px”);
}

</style>
<style type=“text/css”></style> <![endif]–>
</head>
<body>
<div class=“scrollTableContainer”>
<table class=“dataTable” cellspacing=“0”>
<thead id=“mythead”>
<tr id=“mytr”>
<th>Buying House</font></th>

<th>Buyer</th>
<th>Department</th>
<th>Department For</th>
<th>Brand</th>

<th>Yaer</th>
<th>Season</th>
<th>Order No</th>
<th>Shipment Date<br/><font style=“color: #666666; font-size: 50%;”>YYY-MM-DD</font></th>
<th>Shipment Mood</th>

<th>Days To Go</th>
<th>Quantity</th>
<th>Unit In</th>
<th>Fabrics</th>
<th>Composition</th>
<th>Gsm</th>
<th>Special Effect</th>
<th>Yarn Count</th>
<th>Fabrics Remarks</th>
<th>Fabrics Booking Ref No#</th>

<th>Items</th>
<th>Size Range</th>
<th>Total Combo</th>
<th>Total FabCol</th>
<th>Print</th>
<th>Emb</th>
<th>Wash</th>
<th>Price In</th>
<th>Unit Price</th>
<th>Total Price</th>
<th>Fabrics Booking Ref</th>
<th>Master L/C No</th>
<th>Payments Terms</th>
<th>Shipping Line</th>
<th>Commercial Invoice No</th>
<th>Ex-Factor On</th>

<th>Buying/Buyer Merchandiser</th>
<th>Crosswaer A/c</th>
<th>Order Added in System On</th>

</tr>
</thead>
<tbody>
<tr>
<td>KABC</td>
<td>09/12/2002</td>
<td>Submitted</td>
<td>0</td>
</tr>
<tr>
<td>KCBS</td>
<td>09/11/2002</td>
<td>Lockdown</td>
<td>2</td>
</tr>

<tr>
<td>KCBS</td>
<td>09/11/2002</td>
<td>Lockdown</td>
<td>2</td>
</tr>
<tr>
<td>KCBS</td>
<td>09/11/2002</td>
<td>Lockdown</td>
<td>2</td>
</tr>
<tr>
<td>KCBS</td>
<td>09/11/2002</td>
<td>Lockdown</td>
<td>2</td>
</tr>
<tr>
<td>KCBS</td>
<td>09/11/2002</td>
<td>Lockdown</td>
<td>2</td>
</tr>
<tr>
<td>KCBS</td>
<td>09/11/2002</td>
<td>Lockdown</td>
<td>2</td>
</tr>
<tr>
<td>KCBS</td>
<td>09/11/2002</td>
<td>Lockdown</td>
<td>2</td>
</tr>
<tr>
<td>KCBS</td>
<td>09/11/2002</td>
<td>Lockdown</td>
<td>2</td>
</tr>
<tr>
<td>KCBS</td>
<td>09/11/2002</td>
<td>Lockdown</td>
<td>2</td>
</tr>
<tr>
<td>KCBS</td>
<td>09/11/2002</td>
<td>Lockdown</td>
<td>2</td>
</tr>
<tr>
<td>KCBS</td>
<td>09/11/2002</td>
<td>Lockdown</td>
<td>2</td>
</tr>
<tr>
<td>KCBS</td>
<td>09/11/2002</td>
<td>Lockdown</td>
<td>2</td>
</tr>

</tbody>
</table>
</div>
<!-- </body> and </html> are added by templateHelper.display –>
</body>
</html>
<script language=“javascript”><!–
bmi_SafeAddOnload(bmi_load,“bmi_orig_img”,0);//–>

</script>

You got a lot of “th” and not enough “td” to match each other.

On thing you can do is to put a “<td colspan=‘NUMBER_OF_MISSING_COLUMNS_HERE’>” and the table will render ok, offcourse all the “td colspan” will be empty.

It’s more an HTML question then a Javascript one i think.

See you :cool: