Jump to content

problem in overflow:auto in table

newphpcoder

By newphpcoder
in CSS Help

 Share

Recommended Posts

newphpcoder Advanced Member

newphpcoder

Posted
Posted

hi..

 

i have table and I put style overflow:auto

Now, I notice that also the <th> was up when I up the scroll.

 

I just to happen is the <th> will be fix/ not move. only the <tr>

 

here is my code:

 

<div id="kanban_table" style="overflow:auto; height:215px;"> 
<table>
<th> JO No.</th>
<th> ETD </th>
<th> PO No. </th>
<th> SKU Code </th>
<th> Description </th>
<th> PO Req </th>
<th> Priority</th>
<?php
$sql = "SELECT FromMonth , ToMonth FROM so_month";
$res = mysql_query($sql, $con);

$row = mysql_fetch_assoc($res);

$FromMonth = $row['FromMonth'];
$ToMonth = $row['ToMonth'];

$sql = "SELECT ETD, PO_No, SKUCode, Description, POReq 
FROM sales_order  WHERE NOT EXISTS (SELECT PO_No FROM job_order WHERE job_order.PO_No = sales_order.PO_No) AND MONTH(ETD) BETWEEN '$FromMonth' AND '$ToMonth' ORDER BY ETD, PO_No ASC LIMIT 10 ";
$res_so = mysql_query($sql, $con);
while($row = mysql_fetch_assoc($res_so)){ 
echo "<form name='joborder_form' action='' method='post'>";   
$PO_No = $row['PO_No'];    
echo "<tr>
<td><input type='text' value='' style='border:none;' size='10'></td>
<td><input type='text' name='ETD' id='ETD' value='$row[ETD]' style='border:none;' size='10'></td> 
<td><input type='text' name='PO_No' id='PO_No' value='$row[PO_No]' style='border:none;' size='30'></td>
<td><input type='text' name='SKUCode' id='SKUCode' value='$row[sKUCode]' style='border:none;' size='15'></td>
<td><input type='text' name='Description' id='Description' value='$row[Description]' style='border:none;' size='35'></td>
<td><input type='text' name='POReq' id='POReq' value='$row[POReq]' style='border:none;' size='10'></td> 
<td><input type='submit' name='priority' value='Approved' id='priority'></td>
</tr>";
echo "</form>";
}
echo "</table>";
echo "</div>";

 

Thank you

Link to comment
Share on other sites
kicken Prolific Member

kicken

Posted
Posted

Separate your table into sections, wrap the header row in a <thead> tag set and the body rows in a <tbody> tag set.  Then apply the overflow:auto and a set width/height to the tbody tag.  That will keep the header fixed and scroll the body portion.  You will want to test this in your target browsers though as some do not handle such a setup well (if at all).

 

For browsers that do not handle it properly, you could add a bit of JS to re-write the HTML into a format that is more compatible.  You can usually get decent results by putting the header and body into separate tables and wrapping the body table in a div with overflow:auto.  You just need to make sure you apply a width to each column so they are rendered the same and look-like one table to the user.

 

 

Link to comment
Share on other sites
newphpcoder Advanced Member

newphpcoder

Posted
  • Author
Posted

I tried this:

 

<html>
<head>
<title>Job Order</title> 
<link rel="stylesheet" type="text/css" href="kanban.css" />
<style type="text/css"> 
#SR_date{
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .9em;
    margin-left: 10px;
    margin-right: 770px;
    width: auto;
    height: auto;
    float: left;
    top : 10px;
}

#disp_btn{
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .8em;
    margin-left: 0px;
    top: 10px;
}


p {margin:0 0 1em}
table p {margin :0}
.wrap {

   margin:20px 0 0;
    width:96%;
    float:left;
    position:relative;
    height:200px;
    overflow:hidden;
    padding:25px 0 0;
    /*background:#fffccc;*/
    border:1px solid #000;
}
.inner {
    width:100%;
    height:200px;
    overflow:auto;
}
table {          
    margin: 10px;
    font-family: Arial, Helvetica, sans-serif;  
    font-size: .9em;
    border: 1px solid #DDD;
    width: auto;
}

th {
    font-family: Arial, Helvetica, sans-serif;
    font-size: .7em;
    background: #694;
    color: #FFF;
    padding: 2px 6px;
    border-collapse: separate;
    border: 1px solid #000; 
}    

td {
    font-family: Arial, Helvetica, sans-serif;
    font-size: .7em;
    border: 1px solid #DDD;
    text-align: left;
}
thead th {border:none;}
thead tr p {
    position:absolute;
    top:0;
}



</style>    
<script type="text/javascript"> 
function disp(){
  window.location='JobOrderDisplay.php';
}
</script>  
</head>
<body>

<div id="ddcolortabs">
<ul>
<li id="current"> <a href="SalesOrder.php" title="Sales Order"><span>Order Management</span></a></li>
<li> <a href="ParameterSettings.php" title="Parameter Settings"><span>Parameter Settings</span></a></li>
<li style="margin-left: 1px"><a href="kanban_report.php" title="WIP Report"><span>WIP Report</span></a></li>
<li><a href="fsn.php" title="Finished Stock Note"><span>WMS FG</span></a></li>
<li><a href="ReceivingMaterials.php" title="WMS RM"><span>WMS RM</span></a></li>  
</ul>
</div>
<div id="ddcolortabs1">
<ul>
<li><a href="SalesOrder.php" title="Sales Order"><span>Sales Order</span></a></li>
<li id="current"><a href="JobOrder.php" title="Job Order"><span>Job Order</span></a></li>    
</ul>
</div> 

<div id="SR_date">

<input type="hidden" name="Date_Shelve" id="Date_Shelve" value="2012-04-29 13:43:29" size="16" readonly="readonly" style="border: none;">    
</div>



<!--<div id="kanban_table" style="overflow:auto; height:215px;"> -->
<div class="wrap">
    <div class="inner">
        <table id="data" cellspacing="0" cellpadding="0">
            <thead>
            <tr>
                <th> JO No.</th>
                <th> ETD </th>
                <th> PO No. </th>
                <th> SKU Code </th>
                <th> Description </th>
                <th> PO Req </th>
                <th> Priority</th>
            </tr>
            </thead>

<!--<table>
<th> JO No.</th>
<th> ETD </th>
<th> PO No. </th>
<th> SKU Code </th>
<th> Description </th>
<th> PO Req </th>
<th> Priority</th>-->

<form name='joborder_form' action='' method='post'><tbody><tr>
<td><input type='text' value='' style='border:none;' size='10'></td>
<td><input type='text' name='ETD' id='ETD' value='2012-05-04' style='border:none;' size='10'></td> 
<td><input type='text' name='PO_No' id='PO_No' value='WHPO17158' style='border:none;' size='30'></td>
<td><input type='text' name='SKUCode' id='SKUCode' value='602030' style='border:none;' size='15'></td>
<td><input type='text' name='Description' id='Description' value='D TB PADEL 3PET' style='border:none;' size='35'></td>
<td><input type='text' name='POReq' id='POReq' value='7560.00' style='border:none;' size='10'></td> 
<td><input type='submit' name='priority' value='Approved' id='priority'></td>
</tr></form><form name='joborder_form' action='' method='post'><tbody><tr>
<td><input type='text' value='' style='border:none;' size='10'></td>
<td><input type='text' name='ETD' id='ETD' value='2012-05-07' style='border:none;' size='10'></td> 
<td><input type='text' name='PO_No' id='PO_No' value='WHPO16544/ 083064/104' style='border:none;' size='30'></td>
<td><input type='text' name='SKUCode' id='SKUCode' value='745140/13NEW' style='border:none;' size='15'></td>
<td><input type='text' name='Description' id='Description' value='D TB CLUB 3PET' style='border:none;' size='35'></td>
<td><input type='text' name='POReq' id='POReq' value='1662.00' style='border:none;' size='10'></td> 
<td><input type='submit' name='priority' value='Approved' id='priority'></td>
</tr></form><form name='joborder_form' action='' method='post'><tbody><tr>
<td><input type='text' value='' style='border:none;' size='10'></td>
<td><input type='text' name='ETD' id='ETD' value='2012-05-07' style='border:none;' size='10'></td> 
<td><input type='text' name='PO_No' id='PO_No' value='WHPO16544/ 083064/104' style='border:none;' size='30'></td>
<td><input type='text' name='SKUCode' id='SKUCode' value='745139/13NEW' style='border:none;' size='15'></td>
<td><input type='text' name='Description' id='Description' value='S TB SOLO SDI 3PET Blue-Yellow/Orange/Green' style='border:none;' size='35'></td>
<td><input type='text' name='POReq' id='POReq' value='1482.00' style='border:none;' size='10'></td> 
<td><input type='submit' name='priority' value='Approved' id='priority'></td>
</tr></form><form name='joborder_form' action='' method='post'><tbody><tr>
<td><input type='text' value='' style='border:none;' size='10'></td>
<td><input type='text' name='ETD' id='ETD' value='2012-05-07' style='border:none;' size='10'></td> 
<td><input type='text' name='PO_No' id='PO_No' value='WHPO16544/ 083064/104' style='border:none;' size='30'></td>
<td><input type='text' name='SKUCode' id='SKUCode' value='772000/99' style='border:none;' size='15'></td>
<td><input type='text' name='Description' id='Description' value='D SB MAX 3BBL B06 SWI' style='border:none;' size='35'></td>
<td><input type='text' name='POReq' id='POReq' value='336.00' style='border:none;' size='10'></td> 
<td><input type='submit' name='priority' value='Approved' id='priority'></td>
</tr></form><form name='joborder_form' action='' method='post'><tbody><tr>
<td><input type='text' value='' style='border:none;' size='10'></td>
<td><input type='text' name='ETD' id='ETD' value='2012-05-07' style='border:none;' size='10'></td> 
<td><input type='text' name='PO_No' id='PO_No' value='WHPO16544/ 083064/104' style='border:none;' size='30'></td>
<td><input type='text' name='SKUCode' id='SKUCode' value='772000/98' style='border:none;' size='15'></td>
<td><input type='text' name='Description' id='Description' value='D SB PROGRESS 3BBL SDI' style='border:none;' size='35'></td>
<td><input type='text' name='POReq' id='POReq' value='372.00' style='border:none;' size='10'></td> 
<td><input type='submit' name='priority' value='Approved' id='priority'></td>
</tr></form><form name='joborder_form' action='' method='post'><tbody><tr>
<td><input type='text' value='' style='border:none;' size='10'></td>
<td><input type='text' name='ETD' id='ETD' value='2012-05-07' style='border:none;' size='10'></td> 
<td><input type='text' name='PO_No' id='PO_No' value='WHPO16544/ 083064/104' style='border:none;' size='30'></td>
<td><input type='text' name='SKUCode' id='SKUCode' value='772000/95' style='border:none;' size='15'></td>
<td><input type='text' name='Description' id='Description' value='D SB COMP 3BBL B06 SWI' style='border:none;' size='35'></td>
<td><input type='text' name='POReq' id='POReq' value='456.00' style='border:none;' size='10'></td> 
<td><input type='submit' name='priority' value='Approved' id='priority'></td>
</tr></form><form name='joborder_form' action='' method='post'><tbody><tr>
<td><input type='text' value='' style='border:none;' size='10'></td>
<td><input type='text' name='ETD' id='ETD' value='2012-05-07' style='border:none;' size='10'></td> 
<td><input type='text' name='PO_No' id='PO_No' value='WHPO16544/ 083064/104' style='border:none;' size='30'></td>
<td><input type='text' name='SKUCode' id='SKUCode' value='772000/90' style='border:none;' size='15'></td>
<td><input type='text' name='Description' id='Description' value='D SB PRO 3BBL B06 SWI' style='border:none;' size='35'></td>
<td><input type='text' name='POReq' id='POReq' value='1566.00' style='border:none;' size='10'></td> 
<td><input type='submit' name='priority' value='Approved' id='priority'></td>
</tr></form><form name='joborder_form' action='' method='post'><tbody><tr>
<td><input type='text' value='' style='border:none;' size='10'></td>
<td><input type='text' name='ETD' id='ETD' value='2012-05-07' style='border:none;' size='10'></td> 
<td><input type='text' name='PO_No' id='PO_No' value='WHPO16544/ 083064/104' style='border:none;' size='30'></td>
<td><input type='text' name='SKUCode' id='SKUCode' value='745141/12' style='border:none;' size='15'></td>
<td><input type='text' name='Description' id='Description' value='S TB MINI ORANGE 3PET' style='border:none;' size='35'></td>
<td><input type='text' name='POReq' id='POReq' value='102.00' style='border:none;' size='10'></td> 
<td><input type='submit' name='priority' value='Approved' id='priority'></td>
</tr></form><form name='joborder_form' action='' method='post'><tbody><tr>
<td><input type='text' value='' style='border:none;' size='10'></td>
<td><input type='text' name='ETD' id='ETD' value='2012-05-07' style='border:none;' size='10'></td> 
<td><input type='text' name='PO_No' id='PO_No' value='WHPO16544/ 083064/104' style='border:none;' size='30'></td>
<td><input type='text' name='SKUCode' id='SKUCode' value='735031/92' style='border:none;' size='15'></td>
<td><input type='text' name='Description' id='Description' value='D SB PROGRESS SGLBX SDI' style='border:none;' size='35'></td>
<td><input type='text' name='POReq' id='POReq' value='24.00' style='border:none;' size='10'></td> 
<td><input type='submit' name='priority' value='Approved' id='priority'></td>
</tr></form><form name='joborder_form' action='' method='post'><tbody><tr>
<td><input type='text' value='' style='border:none;' size='10'></td>
<td><input type='text' name='ETD' id='ETD' value='2012-05-07' style='border:none;' size='10'></td> 
<td><input type='text' name='PO_No' id='PO_No' value='WHPO16544/ 083064/104' style='border:none;' size='30'></td>
<td><input type='text' name='SKUCode' id='SKUCode' value='735030/91' style='border:none;' size='15'></td>
<td><input type='text' name='Description' id='Description' value='D SB COMP SGLBX SDI' style='border:none;' size='35'></td>
<td><input type='text' name='POReq' id='POReq' value='192.00' style='border:none;' size='10'></td> 
<td><input type='submit' name='priority' value='Approved' id='priority'></td>
</tr></form></tbody></table></div></div>

<!--echo "<div style='overflow:auto; height:215px;'>";-->
<div class="wrap">
    <div class="inner">
        <table id="data" cellspacing="0" cellpadding="0">
<!--echo "<table>";-->
<tbody><tr>
    <td><input type='text' name='JO_No_' id='JO_No_' value='120429001' style='border:none;width:auto;' size='10'></td>
    <td><input type='text' name='ETD_' id='ETD_' value='2012-05-01' style='border:none;width:auto;' size='10'></td> 
    <td><input type='text' name='PO_No_' id='PO_No_' value='D02241233/TGT PO#0088-5078129-0581' style='border:none;' size='30'></td>
    <td><input type='text' name='SKUCode_' id='SKUCode_' value='603107US' style='border:none;' size='15'></td>
    <td><input type='text' name='Description_' id='Description_' value='D TB PRACTICE 3PET NEW' style='border:none;' size='35'></td>
    <td><input type='text' name='POReq_' id='POReq_' value='10800.00' style='border:none;width:auto;' size='10'></td> 
    <td><input type='text' name='priority_' value='Approved' id='priority_' style='border:none;width:auto;' size='10'></td> 
    </tr><tbody><tr>
    <td><input type='text' name='JO_No_' id='JO_No_' value='120429002' style='border:none;width:auto;' size='10'></td>
    <td><input type='text' name='ETD_' id='ETD_' value='2012-05-01' style='border:none;width:auto;' size='10'></td> 
    <td><input type='text' name='PO_No_' id='PO_No_' value='D10221121' style='border:none;' size='30'></td>
    <td><input type='text' name='SKUCode_' id='SKUCode_' value='603107US' style='border:none;' size='15'></td>
    <td><input type='text' name='Description_' id='Description_' value='D TB PRACTICE 3PET NEW' style='border:none;' size='35'></td>
    <td><input type='text' name='POReq_' id='POReq_' value='1332.00' style='border:none;width:auto;' size='10'></td> 
    <td><input type='text' name='priority_' value='Approved' id='priority_' style='border:none;width:auto;' size='10'></td> 
    </tr><tbody><tr>
    <td><input type='text' name='JO_No_' id='JO_No_' value='120429003' style='border:none;width:auto;' size='10'></td>
    <td><input type='text' name='ETD_' id='ETD_' value='2012-05-01' style='border:none;width:auto;' size='10'></td> 
    <td><input type='text' name='PO_No_' id='PO_No_' value='D11121124' style='border:none;' size='30'></td>
    <td><input type='text' name='SKUCode_' id='SKUCode_' value='603107US' style='border:none;' size='15'></td>
    <td><input type='text' name='Description_' id='Description_' value='D TB PRACTICE 3PET NEW' style='border:none;' size='35'></td>
    <td><input type='text' name='POReq_' id='POReq_' value='2082.00' style='border:none;width:auto;' size='10'></td> 
    <td><input type='text' name='priority_' value='Approved' id='priority_' style='border:none;width:auto;' size='10'></td> 
    </tr><tbody><tr>
    <td><input type='text' name='JO_No_' id='JO_No_' value='120429004' style='border:none;width:auto;' size='10'></td>
    <td><input type='text' name='ETD_' id='ETD_' value='2012-05-02' style='border:none;width:auto;' size='10'></td> 
    <td><input type='text' name='PO_No_' id='PO_No_' value='MF12015' style='border:none;' size='30'></td>
    <td><input type='text' name='SKUCode_' id='SKUCode_' value='605040' style='border:none;' size='15'></td>
    <td><input type='text' name='Description_' id='Description_' value='D TB COACHING MED 5DZ PG' style='border:none;' size='35'></td>
    <td><input type='text' name='POReq_' id='POReq_' value='3000.00' style='border:none;width:auto;' size='10'></td> 
    <td><input type='text' name='priority_' value='Approved' id='priority_' style='border:none;width:auto;' size='10'></td> 
    </tr><tbody><tr>
    <td><input type='text' name='JO_No_' id='JO_No_' value='120429004' style='border:none;width:auto;' size='10'></td>
    <td><input type='text' name='ETD_' id='ETD_' value='2012-05-02' style='border:none;width:auto;' size='10'></td> 
    <td><input type='text' name='PO_No_' id='PO_No_' value='MF12022' style='border:none;' size='30'></td>
    <td><input type='text' name='SKUCode_' id='SKUCode_' value='602135' style='border:none;' size='15'></td>
    <td><input type='text' name='Description_' id='Description_' value='D TB FORT ALLCOURT 3TIN' style='border:none;' size='35'></td>
    <td><input type='text' name='POReq_' id='POReq_' value='5400.00' style='border:none;width:auto;' size='10'></td> 
    <td><input type='text' name='priority_' value='Approved' id='priority_' style='border:none;width:auto;' size='10'></td> 
    </tr><tbody><tr>
    <td><input type='text' name='JO_No_' id='JO_No_' value='120429005' style='border:none;width:auto;' size='10'></td>
    <td><input type='text' name='ETD_' id='ETD_' value='2012-05-02' style='border:none;width:auto;' size='10'></td> 
    <td><input type='text' name='PO_No_' id='PO_No_' value='MF12025' style='border:none;' size='30'></td>
    <td><input type='text' name='SKUCode_' id='SKUCode_' value='601137' style='border:none;' size='15'></td>
    <td><input type='text' name='Description_' id='Description_' value='D TB FORT ELITE 3TIN' style='border:none;' size='35'></td>
    <td><input type='text' name='POReq_' id='POReq_' value='3600.00' style='border:none;width:auto;' size='10'></td> 
    <td><input type='text' name='priority_' value='Approved' id='priority_' style='border:none;width:auto;' size='10'></td> 
    </tr><tbody><tr>
    <td><input type='text' name='JO_No_' id='JO_No_' value='120429006' style='border:none;width:auto;' size='10'></td>
    <td><input type='text' name='ETD_' id='ETD_' value='2012-05-03' style='border:none;width:auto;' size='10'></td> 
    <td><input type='text' name='PO_No_' id='PO_No_' value='MF12020' style='border:none;' size='30'></td>
    <td><input type='text' name='SKUCode_' id='SKUCode_' value='340854' style='border:none;' size='15'></td>
    <td><input type='text' name='Description_' id='Description_' value='S TB WIMB UV HYDRA 3TIN' style='border:none;' size='35'></td>
    <td><input type='text' name='POReq_' id='POReq_' value='1800.00' style='border:none;width:auto;' size='10'></td> 
    <td><input type='text' name='priority_' value='Approved' id='priority_' style='border:none;width:auto;' size='10'></td> 
    </tr><tbody><tr>
    <td><input type='text' name='JO_No_' id='JO_No_' value='120429007' style='border:none;width:auto;' size='10'></td>
    <td><input type='text' name='ETD_' id='ETD_' value='2012-05-04' style='border:none;width:auto;' size='10'></td> 
    <td><input type='text' name='PO_No_' id='PO_No_' value='WHPO17130' style='border:none;' size='30'></td>
    <td><input type='text' name='SKUCode_' id='SKUCode_' value='602134' style='border:none;' size='15'></td>
    <td><input type='text' name='Description_' id='Description_' value='D TB FORT ALLCOURT 4TIN' style='border:none;' size='35'></td>
    <td><input type='text' name='POReq_' id='POReq_' value='10080.00' style='border:none;width:auto;' size='10'></td> 
    <td><input type='text' name='priority_' value='Approved' id='priority_' style='border:none;width:auto;' size='10'></td> 
    </tr><tbody><tr>
    <td><input type='text' name='JO_No_' id='JO_No_' value='120429008' style='border:none;width:auto;' size='10'></td>
    <td><input type='text' name='ETD_' id='ETD_' value='2012-05-07' style='border:none;width:auto;' size='10'></td> 
    <td><input type='text' name='PO_No_' id='PO_No_' value='WHPO16476/ 082112/109' style='border:none;' size='30'></td>
    <td><input type='text' name='SKUCode_' id='SKUCode_' value='745137/13' style='border:none;' size='15'></td>
    <td><input type='text' name='Description_' id='Description_' value='TB MIXED LOOSE BALL 5DZ' style='border:none;' size='35'></td>
    <td><input type='text' name='POReq_' id='POReq_' value='4575.00' style='border:none;width:auto;' size='10'></td> 
    <td><input type='text' name='priority_' value='Approved' id='priority_' style='border:none;width:auto;' size='10'></td> 
    </tr><tbody><tr>
    <td><input type='text' name='JO_No_' id='JO_No_' value='120429009' style='border:none;width:auto;' size='10'></td>
    <td><input type='text' name='ETD_' id='ETD_' value='2012-05-07' style='border:none;width:auto;' size='10'></td> 
    <td><input type='text' name='PO_No_' id='PO_No_' value='WHPO16458/ 082106/107' style='border:none;' size='30'></td>
    <td><input type='text' name='SKUCode_' id='SKUCode_' value='745145/13' style='border:none;' size='15'></td>
    <td><input type='text' name='Description_' id='Description_' value='D TB FORT ALL COURT 3X4TIN' style='border:none;' size='35'></td>
    <td><input type='text' name='POReq_' id='POReq_' value='3840.00' style='border:none;width:auto;' size='10'></td> 
    <td><input type='text' name='priority_' value='Approved' id='priority_' style='border:none;width:auto;' size='10'></td> 
    </tr></tbody></table></div></div><div id="disp_btn">
<input type="button" name="print" value="display" onclick="disp()">
</div>

</body>
</html>

I add wrap and inner still te head did not fix and it was not displayed on the wrap part.

 

Thank you

and i attach the output.

post-101569-13482403471264_thumb.jpg

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.