SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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>

  2. #2
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Location
    Bs. As. - Argentina
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •