CathieCreviston
New Member
I'm looking for some advice on styling a couple of nested tables. Here is what the table looks like outlined: http://i.imgur.com/HA4J4.pngWhat I need is to keep Equipment and Material to the left side, but move Hours, Rate and Total to the far right side below the values in the Personnel table. The select list size for Personnel and Equipment can vary. What do you think is the best/cleanest way to achieve this?My HTML:\[code\]<table id="tblTicket"> <tr> <th>Year</th> <td> <select id="cboYear" name="cboYear" onchange="this.form.submit();"> <option value="http://stackoverflow.com/questions/14386103/2018">2018</option> <option value="http://stackoverflow.com/questions/14386103/2017">2017</option> <option value="http://stackoverflow.com/questions/14386103/2016">2016</option> <option value="http://stackoverflow.com/questions/14386103/2015">2015</option> <option value="http://stackoverflow.com/questions/14386103/2014">2014</option> <option value="http://stackoverflow.com/questions/14386103/2013" selected="selected">2013</option> </select> <input type="hidden" name="txtOldYear" value="http://stackoverflow.com/questions/14386103/2013" /> </td> </tr> <tr> <th>Ticket</th> <td> <select id="cboTicket" name="cboTicket" onChange="this.form.submit();" > <option value="http://stackoverflow.com/questions/14386103/1" selected="selected">Jan-11-2013 : Dynasoft : Test Project : 1-130111-00</option> </select> </td> </tr> <tr> <th>Client</th> <td> <select id="cboClient" name="cboClient" > <option value="http://stackoverflow.com/questions/14386103/1" selected="selected">Dynasoft</option> </select> </td> </tr> <tr> <th>Project</th> <td> <select id="cboProjects" name="cboProjects" > <option value="http://stackoverflow.com/questions/14386103/1" data-number="1" selected="selected">Test Project</option> </select> </td> </tr> <tr> <th>Location</th> <td> <span id="spLocation">Lloydminster</span> </td> </tr> <tr> <th>Ticket #</th> <td> <input type="text" id="txtTicketNumber" name="txtTicketNumber" size="54" value="http://stackoverflow.com/questions/14386103/1-130111-00" > </td> </tr> <tr> <th>Client P.O. #</th> <td> <input type="text" id="txtClientPO" name="txtClientPO" size="54" value="" > </td> </tr> <tr> <th>Work Order #</th> <td> <input type="text" id="txtWorkOrder" name="txtWorkOrder" size="54" value="" > </td> </tr> <tr> <th>Description</th> <td> <textarea name="txtDescription" rows="4" cols="40" ></textarea> </td> </tr> <tr> <th>When</th> <td> <table> <tr> <th>From</th> <td> <span id="start-date">Date <select id="start-year" name="start-year" size="1"> <option value="http://stackoverflow.com/questions/14386103/2018">2018</option> <option value="http://stackoverflow.com/questions/14386103/2017">2017</option> <option value="http://stackoverflow.com/questions/14386103/2016">2016</option> <option value="http://stackoverflow.com/questions/14386103/2015">2015</option> <option value="http://stackoverflow.com/questions/14386103/2014">2014</option> <option value="http://stackoverflow.com/questions/14386103/2013" selected="selected">2013</option> <option value="http://stackoverflow.com/questions/14386103/2012">2012</option> <option value="http://stackoverflow.com/questions/14386103/2011">2011</option> <option value="http://stackoverflow.com/questions/14386103/2010">2010</option> <option value="http://stackoverflow.com/questions/14386103/2009">2009</option> <option value="http://stackoverflow.com/questions/14386103/2008">2008</option> <option value="http://stackoverflow.com/questions/14386103/2007">2007</option> <option value="http://stackoverflow.com/questions/14386103/2006">2006</option> <option value="http://stackoverflow.com/questions/14386103/2005">2005</option> <option value="http://stackoverflow.com/questions/14386103/2004">2004</option> <option value="http://stackoverflow.com/questions/14386103/2003">2003</option> <option value="http://stackoverflow.com/questions/14386103/2002">2002</option> <option value="http://stackoverflow.com/questions/14386103/2001">2001</option> <option value="http://stackoverflow.com/questions/14386103/2000">2000</option> </select> <select id="start-month" name="start-month" size="1"> <option value="http://stackoverflow.com/questions/14386103/1" selected="selected">January</option> <option value="http://stackoverflow.com/questions/14386103/2">February</option> <option value="http://stackoverflow.com/questions/14386103/3">March</option> <option value="http://stackoverflow.com/questions/14386103/4">April</option> <option value="http://stackoverflow.com/questions/14386103/5">May</option> <option value="http://stackoverflow.com/questions/14386103/6">June</option> <option value="http://stackoverflow.com/questions/14386103/7">July</option> <option value="http://stackoverflow.com/questions/14386103/8">August</option> <option value="http://stackoverflow.com/questions/14386103/9">September</option> <option value="http://stackoverflow.com/questions/14386103/10">October</option> <option value="http://stackoverflow.com/questions/14386103/11">November</option> <option value="http://stackoverflow.com/questions/14386103/12">December</option> </select> <select id="start-day" name="start-day" size="1"> <option value="http://stackoverflow.com/questions/14386103/1">1</option> <option value="http://stackoverflow.com/questions/14386103/2">2</option> <option value="http://stackoverflow.com/questions/14386103/3">3</option> <option value="http://stackoverflow.com/questions/14386103/4">4</option> <option value="http://stackoverflow.com/questions/14386103/5">5</option> <option value="http://stackoverflow.com/questions/14386103/6">6</option> <option value="http://stackoverflow.com/questions/14386103/7">7</option> <option value="http://stackoverflow.com/questions/14386103/8">8</option> <option value="http://stackoverflow.com/questions/14386103/9">9</option> <option value="http://stackoverflow.com/questions/14386103/10">10</option> <option value="http://stackoverflow.com/questions/14386103/11" selected="selected">11</option> <option value="http://stackoverflow.com/questions/14386103/12">12</option> <option value="http://stackoverflow.com/questions/14386103/13">13</option> <option value="http://stackoverflow.com/questions/14386103/14">14</option> <option value="http://stackoverflow.com/questions/14386103/15">15</option> <option value="http://stackoverflow.com/questions/14386103/16">16</option> <option value="http://stackoverflow.com/questions/14386103/17">17</option> <option value="http://stackoverflow.com/questions/14386103/18">18</option> <option value="http://stackoverflow.com/questions/14386103/19">19</option> <option value="http://stackoverflow.com/questions/14386103/20">20</option> <option value="http://stackoverflow.com/questions/14386103/21">21</option> <option value="http://stackoverflow.com/questions/14386103/22">22</option> <option value="http://stackoverflow.com/questions/14386103/23">23</option> <option value="http://stackoverflow.com/questions/14386103/24">24</option> <option value="http://stackoverflow.com/questions/14386103/25">25</option> <option value="http://stackoverflow.com/questions/14386103/26">26</option> <option value="http://stackoverflow.com/questions/14386103/27">27</option> <option value="http://stackoverflow.com/questions/14386103/28">28</option> <option value="http://stackoverflow.com/questions/14386103/29">29</option> <option value="http://stackoverflow.com/questions/14386103/30">30</option> <option value="http://stackoverflow.com/questions/14386103/31">31</option> </select> </span> </td> </tr> <tr> <th>To</th> <td> <span id="end-date">Date <select id="end-year" name="end-year" size="1"> <option value="http://stackoverflow.com/questions/14386103/2018">2018</option> <option value="http://stackoverflow.com/questions/14386103/2017">2017</option> <option value="http://stackoverflow.com/questions/14386103/2016">2016</option> <option value="http://stackoverflow.com/questions/14386103/2015">2015</option> <option value="http://stackoverflow.com/questions/14386103/2014">2014</option> <option value="http://stackoverflow.com/questions/14386103/2013" selected="selected">2013</option> <option value="http://stackoverflow.com/questions/14386103/2012">2012</option> <option value="http://stackoverflow.com/questions/14386103/2011">2011</option> <option value="http://stackoverflow.com/questions/14386103/2010">2010</option> <option value="http://stackoverflow.com/questions/14386103/2009">2009</option> <option value="http://stackoverflow.com/questions/14386103/2008">2008</option> <option value="http://stackoverflow.com/questions/14386103/2007">2007</option> <option value="http://stackoverflow.com/questions/14386103/2006">2006</option> <option value="http://stackoverflow.com/questions/14386103/2005">2005</option> <option value="http://stackoverflow.com/questions/14386103/2004">2004</option> <option value="http://stackoverflow.com/questions/14386103/2003">2003</option> <option value="http://stackoverflow.com/questions/14386103/2002">2002</option> <option value="http://stackoverflow.com/questions/14386103/2001">2001</option> <option value="http://stackoverflow.com/questions/14386103/2000">2000</option> </select> <select id="end-month" name="end-month" size="1"> <option value="http://stackoverflow.com/questions/14386103/1" selected="selected">January</option> <option value="http://stackoverflow.com/questions/14386103/2">February</option> <option value="http://stackoverflow.com/questions/14386103/3">March</option> <option value="http://stackoverflow.com/questions/14386103/4">April</option> <option value="http://stackoverflow.com/questions/14386103/5">May</option> <option value="http://stackoverflow.com/questions/14386103/6">June</option> <option value="http://stackoverflow.com/questions/14386103/7">July</option> <option value="http://stackoverflow.com/questions/14386103/8">August</option> <option value="http://stackoverflow.com/questions/14386103/9">September</option> <option value="http://stackoverflow.com/questions/14386103/10">October</option> <option value="http://stackoverflow.com/questions/14386103/11">November</option> <option value="http://stackoverflow.com/questions/14386103/12">December</option> </select> <select id="end-day" name="end-day" size="1"> <option value="http://stackoverflow.com/questions/14386103/1">1</option> <option value="http://stackoverflow.com/questions/14386103/2">2</option> <option value="http://stackoverflow.com/questions/14386103/3">3</option> <option value="http://stackoverflow.com/questions/14386103/4">4</option> <option value="http://stackoverflow.com/questions/14386103/5">5</option> <option value="http://stackoverflow.com/questions/14386103/6">6</option> <option value="http://stackoverflow.com/questions/14386103/7">7</option> <option value="http://stackoverflow.com/questions/14386103/8">8</option> <option value="http://stackoverflow.com/questions/14386103/9">9</option> <option value="http://stackoverflow.com/questions/14386103/10">10</option> <option value="http://stackoverflow.com/questions/14386103/11" selected="selected">11</option> <option value="http://stackoverflow.com/questions/14386103/12">12</option> <option value="http://stackoverflow.com/questions/14386103/13">13</option> <option value="http://stackoverflow.com/questions/14386103/14">14</option> <option value="http://stackoverflow.com/questions/14386103/15">15</option> <option value="http://stackoverflow.com/questions/14386103/16">16</option> <option value="http://stackoverflow.com/questions/14386103/17">17</option> <option value="http://stackoverflow.com/questions/14386103/18">18</option> <option value="http://stackoverflow.com/questions/14386103/19">19</option> <option value="http://stackoverflow.com/questions/14386103/20">20</option> <option value="http://stackoverflow.com/questions/14386103/21">21</option> <option value="http://stackoverflow.com/questions/14386103/22">22</option> <option value="http://stackoverflow.com/questions/14386103/23">23</option> <option value="http://stackoverflow.com/questions/14386103/24">24</option> <option value="http://stackoverflow.com/questions/14386103/25">25</option> <option value="http://stackoverflow.com/questions/14386103/26">26</option> <option value="http://stackoverflow.com/questions/14386103/27">27</option> <option value="http://stackoverflow.com/questions/14386103/28">28</option> <option value="http://stackoverflow.com/questions/14386103/29">29</option> <option value="http://stackoverflow.com/questions/14386103/30">30</option> <option value="http://stackoverflow.com/questions/14386103/31">31</option> </select> </span> </td> </tr> </table> </td> </tr> <tr> <th>Personnel</th> <td> <table id="tblPersonnel"> <thead> <tr> <th> </th> <th>Employee</th> <th>Occupation</th> <th>Hours</th> <th>Rate</th> <th>OT Hours</th> <th>OT Rate</th> <th>Total</th> </tr> </thead> <tfoot> <tr> <td> </td> <td> <select id="cboNewEmp" name="cboNewEmp" > <option value="http://stackoverflow.com/questions/14386103/-1">-- Select an Employee --</option> <option value="http://stackoverflow.com/questions/14386103/1">Employee, Test</option> <option value="http://stackoverflow.com/questions/14386103/2">Employeee, Test 2</option> </select> </td> <td> <select id="cboNewOcc" name="cboNewOcc" disabled="disabled"> <option value="http://stackoverflow.com/questions/14386103/-1">-- Select an Occupation --</option> </select> </td> <td> <input type="text" id="txtNewHours" name="txtNewHours" size="10" value="http://stackoverflow.com/questions/14386103/0" disabled="disabled"> </td> <td> <input type="text" id="txtNewRate" name="txtNewRate" size="10" value="http://stackoverflow.com/questions/14386103/0.00" disabled="disabled"> </td> <td> <input type="text" id="txtNewOTHours" name="txtNewOTHours" size="10" value="http://stackoverflow.com/questions/14386103/0" disabled="disabled"> </td> <td> <input type="text" id="txtNewOTRate" name="txtNewOTRate" size="10" value="http://stackoverflow.com/questions/14386103/0.00" disabled="disabled"> </td> <td> <span>0.00</span> </td> </tr> </tfoot> <tbody> </tbody> </table> </td> </tr> <tr> <th>Equipment</th> <td> <table id="tblEquipments"> <thead> <tr> <th> </th> <th>Equipment</th> <th>Hours</th> <th>Rate</th> <th>Total</th> </tr> </thead> <tfoot> <tr> <td> </td> <td> <select id="cboNewEquip" name="cboNewEquip" > <option value="http://stackoverflow.com/questions/14386103/-1">-- Select Equipment --</option> <option value="http://stackoverflow.com/questions/14386103/1" data-rate="10">Equipment: 12345</option> </select> </td> <td> <input type="text" id="txtNewEquipHours" name="txtNewEquipHours" size="10" value="http://stackoverflow.com/questions/14386103/0" disabled="disabled"> </td> <td> <input type="text" id="txtNewEquipRate" name="txtNewEquipRate" size="10" value="http://stackoverflow.com/questions/14386103/0.00" disabled="disabled"> </td> <td> <span>0.00</span> </td> </tr> </tfoot> <tbody> </tbody> </table> </td> </tr> <tr> <th>Materials</th> <td> <table id="tblMaterials"> <thead> <tr> <th> </th> <th>Material</th> <th>Quantity</th> <th>Rate</th> <th>Total</th> </tr> </thead> <tfoot> <tr> <td> </td> <td> <input type="text" id="txtNewMaterial" name="txtNewMaterial" value="" > </td> <td> <input type="text" id="txtNewMatQty" name="txtNewMatQty" size="10" value="http://stackoverflow.com/questions/14386103/0" disabled="disabled"> </td> <td> <input type="text" id="txtNewMatRate" name="txtNewMatRate" size="10" value="http://stackoverflow.com/questions/14386103/0.00" disabled="disabled"> </td> <td> <span>0.00</span> </td> </tr> <tr> <td colspan="5"> <div id="button"> <input type="button" id="btnRemoveSelected" name="btnRemoveSelected" value="http://stackoverflow.com/questions/14386103/Remove Selected Items"> </div> </td> </tr> </tfoot> <tbody> </tbody> </table> </td> </tr></table>\[/code\]