newphpcoder Posted April 28, 2012 Share Posted April 28, 2012 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 Quote Link to comment https://forums.phpfreaks.com/topic/261751-problem-in-overflowauto-in-table/ Share on other sites More sharing options...
kicken Posted April 28, 2012 Share Posted April 28, 2012 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. Quote Link to comment https://forums.phpfreaks.com/topic/261751-problem-in-overflowauto-in-table/#findComment-1341327 Share on other sites More sharing options...
newphpcoder Posted April 29, 2012 Author Share Posted April 29, 2012 Thank you Quote Link to comment https://forums.phpfreaks.com/topic/261751-problem-in-overflowauto-in-table/#findComment-1341491 Share on other sites More sharing options...
newphpcoder Posted April 29, 2012 Author Share Posted April 29, 2012 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. Quote Link to comment https://forums.phpfreaks.com/topic/261751-problem-in-overflowauto-in-table/#findComment-1341493 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.