vucsmxpsfe
New Member
I have the following HTML, which contains a scrollable table. Although I have specified column widths in every instance (except where colspan is greater than 1), I cannot get the data columns to align with the header, and I do not see why.I suspect the issue is the result of not understanding how CSS styles inter-relate, but this is where I am. I would love to find a good reference that could help me in that understanding. Where you now see 'table.main.innerb.subt' I have tried a number of combinations, including simply '.subt' but the issue remains.What is wrong with the code that prevents the table from aligning? And where is a good "dummy's guide" type of reference that would help with the initial understanding hurdle? \[code\]<html><head><meta http-equiv='Content-Type' content='text/html; charset=WINDOWS-1252'><TITLE>10% Analysis Report for 11/18/2012</TITLE><style type='text/css'> caption.head { font-family: verdana,arial,sans-serif; font-size:18pt; color:#333333; border:0 solid white; align: center; cellspacing=0; }table.main { border-collapse:collapse; border:1px solid gray; }table.main th { border-width: 1px; padding: 2px 8px; border-style: solid; background-color: #dedede; }table.main th.empno {width:6em;}table.main th.empname {width:30em;}table.main th.date {width:8em;}table.main th.amt {width:8em;}table.main th.pct {width:5em;}table.main th.dir {width:3em;}table.main th.oicode {width:3em;}table.main.innerb.subt th.empno {width:6em;}table.main.innerb.subt th.empname {width:30em;}table.main.innerb.subt th.date {width:8em;}table.main.innerb.subt th.amt {width:8em;}table.main.innerb.subt th.pct {width:5em;}table.main.innerb.subt th.dir {width:3em;}table.main.innerb.subt th.oicode {width:3em;}table.main th.line2 { border-width: 1px; padding: 0px 8px; border-style: solid; background-color: #dedede; }table.main tr.shade { background-color: NavajoWhite; }table.main td { padding: 2px 15px; vertical-align: top; }table.main td.oicode { border:0 solid white; padding: 0px 0px; width=4em; }table.main td.oicode2 { padding: 0px 0px; width=4em; }table.main td.oiamt { border:0 solid white; padding: 0px 0px; text-align: right; width=4em; }table.main td.oiamt2 { padding: 0px 0px; text-align: right; width=4em; }table.main td.empno {width:6em;}table.main td.empname {width:30em;}table.main td.date {width:8em;}table.main td.amt {width:8em;}table.main td.pct {width:5em;}table.main td.dir {width:3em;}table.main td.oicode {width:3em;}table.main.innerb.subt td.empno {width:6em;}table.main.innerb.subt td.empname {width:30em;}table.main.innerb.subt td.date {width:8em;}table.main.innerb.subt td.amt {width:8em;}table.main.innerb.subt td.pct {width:5em;}table.main.innerb.subt td.dir {width:3em;}table.main.innerb.subt td.oicode {width:3em;}.empno {width:6em;}.empname {width:30em;}.date {width:8em;}.amt {width:8em;}.pct {width:5em;}.dir {width:3em;}.oicode {width:3em;}.innerb {height:20em; overflow:auto;}</style></head><body><p><table class='main' align='center' summary='Script output'><div style='valign: center;'><caption class='head'> 10% Analysis Report for 11/18/2012</caption></div><thead><tr> <th scope='col' colspan='2'>Employee</th> <th scope='col' colspan='2'>Period End</th> <th scope='col' colspan='2'>Gross Amount</th> <th scope='col' rowspan='2' class='pct'>Gross Chg %</th> <th scope='col' rowspan='2' class='amt'> Difference </th> <th scope='col' rowspan='2' class='dir'>Dir</th> <th scope='col' colspan='2'>Net Amount</th> <th scope='col' rowspan='2' class='amt'>Net Chg %</th> <th scope='col' colspan='5'>Current Period Amounts</th> <th scope='col' colspan='3'>Other Incomes</th></tr><tr> <th scope='col' class='empno'>xxxxxx</th> <th scope='col' class='empname'>Name</th> <th scope='col' class='date'>Latest</th> <th scope='col' class='date'>Previous</th> <th scope='col' class='amt'>Latest</th> <th scope='col' class='amt'>Previous</th> <th scope='col' class='amt'>Latest</th> <th scope='col' class='amt'>Previous</th> <th scope='col' class='amt'>Overtime</th> <th scope='col' class='amt'>DCP</th> <th scope='col' class='amt'>RRP</th> <th scope='col' class='amt'>OOP</th> <th scope='col' class='amt'>Other</th> <th scope='col' class='oicode'>Code</th> <th scope='col' class='amt'>Curr</th> <th scope='col' class='amt'>Prev</th></tr></thead> <tfoot> <tr> <td colspan="5">Footer</td> </tr> </tfoot><tbody><tr><td colspan='20'><div class="innerb"><table class='subt'><tr><td rowspan='2' class='empno'>xxxxxx</td><td rowspan='2' class='empname'>Howya Doin</td><td rowspan='2' class='date'>11/18/2012</td><td rowspan='2' class='date'>11/04/2012</td><td rowspan='2' align='right' class='amt'>7,241.67</td><td rowspan='2' align='right' class='amt'>6,325.00</td><td rowspan='2' align='right' class='pct'>14.49</td><td rowspan='2' align='right' class='amt'>916.67</td><td rowspan='2' class='dir'> </td><td rowspan='2' align='right' class='amt'>4,246.38</td><td rowspan='2' align='right' class='amt'>3,660.80</td><td rowspan='2' align='right' class='pct'>16.00</td><td rowspan='2' align='right' class='amt'>916.67</td><td rowspan='2' align='right' class='amt'> </td><td rowspan='2' align='right' class='amt'> </td><td rowspan='2' align='right' class='amt'> </td><td rowspan='2' align='right' class='amt'>825.00</td><td class=oicode> OT </td><td class=oiamt> 916.67 </td><td class=oiamt> </td></tr> <tr><td class=oicode> SH3 </td><td class=oiamt> 825.00 </td><td class=oiamt> 825.00 </td></tr><tr CLASS='SHADE'><td rowspan='2' class='empno'>xxxxxx</td><td rowspan='2' class='empname'>Hoosier Friend</td><td rowspan='2' class='date'>11/18/2012</td><td rowspan='2' class='date'>11/04/2012</td><td rowspan='2' align='right' class='amt'>2,174.04</td><td rowspan='2' align='right' class='amt'>1,961.54</td><td rowspan='2' align='right' class='pct'>10.83</td><td rowspan='2' align='right' class='amt'>212.50</td><td rowspan='2' class='dir'> </td><td rowspan='2' align='right' class='amt'>1,511.09</td><td rowspan='2' align='right' class='amt'>1,363.72</td><td rowspan='2' align='right' class='pct'>10.81</td><td rowspan='2' align='right' class='amt'>212.50</td><td rowspan='2' align='right' class='amt'> </td><td rowspan='2' align='right' class='amt'> </td><td rowspan='2' align='right' class='amt'> </td><td rowspan='2' align='right' class='amt'> </td><td class=oicode> OT </td><td class=oiamt> 65.38 </td><td class=oiamt> </td></tr> <tr CLASS='SHADE'><td class=oicode> OT1 </td><td class=oiamt> 147.12 </td><td class=oiamt> </td></tr><tr><td rowspan='1' class='empno'>xxxxxx</td><td rowspan='1' class='empname'>Wanna B. Special</td><td rowspan='1' class='date'>11/18/2012</td><td rowspan='1' class='date'>11/04/2012</td><td rowspan='1' align='right' class='amt'>3,282.69</td><td rowspan='1' align='right' class='amt'>6,565.38</td><td rowspan='1' align='right' class='pct'>50.00</td><td rowspan='1' align='right' class='amt'>3,282.69</td><td rowspan='1' class='dir'>Down</td><td rowspan='1' align='right' class='amt'>2,138.21</td><td rowspan='1' align='right' class='amt'>3,975.41</td><td rowspan='1' align='right' class='pct'>46.21</td><td rowspan='1' align='right' class='amt'> </td><td rowspan='1' align='right' class='amt'> </td><td rowspan='1' align='right' class='amt'> </td><td rowspan='1' align='right' class='amt'> </td><td rowspan='1' align='right' class='amt'>3,282.69</td><td class=oicode> VAC </td><td class=oiamt> 3,282.69 </td><td class=oiamt> </td></tr><tr CLASS='SHADE'><td rowspan='2' class='empno'>xxxxxx</td><td rowspan='2' class='empname'>Frisky Muffin</td><td rowspan='2' class='date'>11/18/2012</td><td rowspan='2' class='date'>11/04/2012</td><td rowspan='2' align='right' class='amt'>2,223.50</td><td rowspan='2' align='right' class='amt'>2,020.38</td><td rowspan='2' align='right' class='pct'>10.05</td><td rowspan='2' align='right' class='amt'>203.12</td><td rowspan='2' class='dir'> </td><td rowspan='2' align='right' class='amt'>1,561.17</td><td rowspan='2' align='right' class='amt'>1,400.01</td><td rowspan='2' align='right' class='pct'>11.51</td><td rowspan='2' align='right' class='amt'>203.12</td><td rowspan='2' align='right' class='amt'> </td><td rowspan='2' align='right' class='amt'> </td><td rowspan='2' align='right' class='amt'> </td><td rowspan='2' align='right' class='amt'> </td><td class=oicode> OT </td><td class=oiamt> 41.49 </td><td class=oiamt> </td></tr> <tr CLASS='SHADE'><td class=oicode> OT1 </td><td class=oiamt> 161.63 </td><td class=oiamt> </td></tr><tr><td rowspan='2' class='empno'>xxxxxx</td><td rowspan='2' class='empname'>Howya Holdenup</td><td rowspan='2' class='date'>11/18/2012</td><td rowspan='2' class='date'>11/04/2012</td><td rowspan='2' align='right' class='amt'>2,110.31</td><td rowspan='2' align='right' class='amt'>1,984.62</td><td rowspan='2' align='right' class='pct'>6.33</td><td rowspan='2' align='right' class='amt'>125.69</td><td rowspan='2' class='dir'> </td><td rowspan='2' align='right' class='amt'>1,643.36</td><td rowspan='2' align='right' class='amt'>1,442.42</td><td rowspan='2' align='right' class='pct'>13.93</td><td rowspan='2' align='right' class='amt'>125.69</td><td rowspan='2' align='right' class='amt'> </td><td rowspan='2' align='right' class='amt'> </td><td rowspan='2' align='right' class='amt'> </td><td rowspan='2' align='right' class='amt'> </td><td class=oicode> OT </td><td class=oiamt> 66.15 </td><td class=oiamt> </td></tr> <tr><td class=oicode> OT1 </td><td class=oiamt> 59.54 </td><td class=oiamt> </td></tr><tr CLASS='SHADE'><td rowspan='1' class='empno'>xxxxxx</td><td rowspan='1' class='empname'>Failin Groovy</td><td rowspan='1' class='date'>11/18/2012</td><td rowspan='1' class='date'>11/04/2012</td><td rowspan='1' align='right' class='amt'>300.00</td><td rowspan='1' align='right' class='amt'>4,876.92</td><td rowspan='1' align='right' class='pct'>93.85</td><td rowspan='1' align='right' class='amt'>4,576.92</td><td rowspan='1' class='dir'>Down</td><td rowspan='1' align='right' class='amt'>191.79</td><td rowspan='1' align='right' class='amt'>3,514.42</td><td rowspan='1' align='right' class='pct'>94.54</td><td rowspan='1' align='right' class='amt'> </td><td rowspan='1' align='right' class='amt'> </td><td rowspan='1' align='right' class='amt'> </td><td rowspan='1' align='right' class='amt'>300.00</td><td rowspan='1' align='right' class='amt'> </td><td class=oicode> RR2 </td><td class=oiamt> 300.00 </td><td class=oiamt> </td></tr><tr><td rowspan='1' class='empno'>xxxxxx</td><td rowspan='1' class='empname'>Hoosier Cousin</td><td rowspan='1' class='date'>11/18/2012</td><td rowspan='1' class='date'>11/04/2012</td><td rowspan='1' align='right' class='amt'>3,076.92</td><td rowspan='1' align='right' class='amt'>2,461.54</td><td rowspan='1' align='right' class='pct'>25.00</td><td rowspan='1' align='right' class='amt'>615.38</td><td rowspan='1' class='dir'> </td><td rowspan='1' align='right' class='amt'>2,032.98</td><td rowspan='1' align='right' class='amt'>1,670.48</td><td rowspan='1' align='right' class='pct'>21.70</td><td rowspan='1' align='right' class='amt'>615.38</td><td rowspan='1' align='right' class='amt'> </td><td rowspan='1' align='right' class='amt'> </td><td rowspan='1' align='right' class='amt'> </td><td rowspan='1' align='right' class='amt'> </td><td class=oicode> OT1 </td><td class=oiamt> 615.38 </td><td class=oiamt> </td></tr><tr CLASS='SHADE'><td rowspan='1' class='empno'>xxxxxx</td><td rowspan='1' class='empname'>Sunny Skies</td><td rowspan='1' class='date'>11/18/2012</td><td rowspan='1' class='date'>11/04/2012</td><td rowspan='1' align='right' class='amt'>4,913.46</td><td rowspan='1' align='right' class='amt'>4,211.54</td><td rowspan='1' align='right' class='pct'>16.67</td><td rowspan='1' align='right' class='amt'>701.92</td><td rowspan='1' class='dir'> </td><td rowspan='1' align='right' class='amt'>3,170.59</td><td rowspan='1' align='right' class='amt'>2,745.88</td><td rowspan='1' align='right' class='pct'>15.47</td><td rowspan='1' align='right' class='amt'> </td><td rowspan='1' align='right' class='amt'> </td><td rowspan='1' align='right' class='amt'> </td><td rowspan='1' align='right' class='amt'> </td><td rowspan='1' align='right' class='amt'>701.92</td><td class=oicode> HOL </td><td class=oiamt> 701.92 </td><td class=oiamt> </td></tr><tr><td rowspan='3' class='empno'>xxxxxx</td><td rowspan='3' class='empname'>Wanna B. Somebody</td><td rowspan='3' class='date'>11/18/2012</td><td rowspan='3' class='date'>10/21/2012</td><td rowspan='3' align='right' class='amt'>11,788.46</td><td rowspan='3' align='right' class='amt'>35,365.38</td><td rowspan='3' align='right' class='pct'>66.67</td><td rowspan='3' align='right' class='amt'>23,576.92</td><td rowspan='3' class='dir'>Down</td><td rowspan='3' align='right' class='amt'>6,848.28</td><td rowspan='3' align='right' class='amt'>18,911.71</td><td rowspan='3' align='right' class='pct'>63.79</td><td rowspan='3' align='right' class='amt'> </td><td rowspan='3' align='right' class='amt'> </td><td rowspan='3' align='right' class='amt'> </td><td rowspan='3' align='right' class='amt'> </td><td rowspan='3' align='right' class='amt'>11,788.46</td><td class=oicode> EX1 </td><td class=oiamt> </td><td class=oiamt> 353.65 </td></tr> <tr><td class=oicode> SEV </td><td class=oiamt> 11,788.46 </td><td class=oiamt> </td></tr> <tr><td class=oicode> VAC </td><td class=oiamt> </td><td class=oiamt> 23,576.92 </td></tr><tr CLASS='SHADE'><td rowspan='1' class='empno'>xxxxxx</td><td rowspan='1' class='empname'>Sporty Cabin</td><td rowspan='1' class='date'>11/18/2012</td><td rowspan='1' class='date'>11/04/2012</td><td rowspan='1' align='right' class='amt'>250.00</td><td rowspan='1' align='right' class='amt'>3,488.46</td><td rowspan='1' align='right' class='pct'>92.83</td><td rowspan='1' align='right' class='amt'>3,238.46</td><td rowspan='1' class='dir'>Down</td><td rowspan='1' align='right' class='amt'>138.70</td><td rowspan='1' align='right' class='amt'>1,958.82</td><td rowspan='1' align='right' class='pct'>92.92</td><td rowspan='1' align='right' class='amt'> </td><td rowspan='1' align='right' class='amt'> </td><td rowspan='1' align='right' class='amt'> </td><td rowspan='1' align='right' class='amt'>250.00</td><td rowspan='1' align='right' class='amt'> </td><td class=oicode> RR2 </td><td class=oiamt> 250.00 </td><td class=oiamt> </td></tr><tr><td rowspan='1' class='empno'>xxxxxx</td><td rowspan='1' class='empname'>Giant Cricket</td><td rowspan='1' class='date'>11/18/2012</td><td rowspan='1' class='date'>11/04/2012</td><td rowspan='1' align='right' class='amt'>288.00</td><td rowspan='1' align='right' class='amt'>720.00</td><td rowspan='1' align='right' class='pct'>60.00</td><td rowspan='1' align='right' class='amt'>432.00</td><td rowspan='1' class='dir'>Down</td><td rowspan='1' align='right' class='amt'>265.81</td><td rowspan='1' align='right' class='amt'>622.38</td><td rowspan='1' align='right' class='pct'>57.29</td><td rowspan='1' align='right' class='amt'> </td><td rowspan='1' align='right' class='amt'> </td><td rowspan='1' align='right' class='amt'> </td><td rowspan='1' align='right' class='amt'> </td><td rowspan='1' align='right' class='amt'>288.00</td><td class=oicode> PDW </td><td class=oiamt> 288.00 </td><td class=oiamt> 720.00 </td></tr><tr CLASS='SHADE'><td rowspan='1' class='empno'>xxxxxx</td><td rowspan='1' class='empname'>Blue Lagoon</td><td rowspan='1' class='date'>11/18/2012</td><td rowspan='1' class='date'>11/04/2012</td><td rowspan='1' align='right' class='amt'>5,927.54</td><td rowspan='1' align='right' class='amt'>3,236.92</td><td rowspan='1' align='right' class='pct'>83.12</td><td rowspan='1' align='right' class='amt'>2,690.62</td><td rowspan='1' class='dir'> </td><td rowspan='1' align='right' class='amt'>3,889.05</td><td rowspan='1' align='right' class='amt'>2,253.43</td><td rowspan='1' align='right' class='pct'>72.58</td><td rowspan='1' align='right' class='amt'> </td><td rowspan='1' align='right' class='amt'> </td><td rowspan='1' align='right' class='amt'> </td><td rowspan='1' align='right' class='amt'> </td><td rowspan='1' align='right' class='amt'>-34.00</td><td class=oicode> DBL </td><td class=oiamt> -34.00 </td><td class=oiamt> -2,724.62 </td></tr></table></div></td></tr></tbody></table></body></html>\[/code\]Thanks for helping!