我有以下 HTML，其中包含一个可滚动的表格。尽管我在每个实例中都指定了列宽（colspan 大于 1 的情况除外），但我无法让数据列与标题对齐，我不明白为什么。
我怀疑这个问题是不了解 CSS 样式如何相互关联的结果，但这就是我所在的地方。我很想找到一个很好的参考资料，可以帮助我理解。您现在看到“table.main.innerb.subt”的地方我尝试了多种组合，包括简单的“.subt”，但问题仍然存在。
阻止表格对齐的代码有什么问题？哪里有一个好的“虚拟指南”类型的参考，可以帮助解决最初的理解障碍？
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content=
"HTML Tidy for Linux/x86 (vers 6 November 2007), see www.w3.org"
name="generator">
<meta content='text/html; charset=us-ascii' http-equiv=
'Content-Type'>
<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;
}
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>
<style type="text/css">
div.c1 {valign: center;}
</style>
</head>
<body>
<p></p>
<div class='c1'></div>
<table align='center' class='main' summary='Script output'>
<caption class='head'>
10% Analysis Report for 11/18/2012
</caption>
<thead>
<tr>
<th colspan='2' scope='col'>Employee</th>
<th colspan='2' scope='col'>Period End</th>
<th colspan='2' scope='col'>Gross Amount</th>
<th class='pct' rowspan='2' scope='col'>Gross Chg %</th>
<th class='amt' rowspan='2' scope='col'> Difference </th>
<th class='dir' rowspan='2' scope='col'>Dir</th>
<th colspan='2' scope='col'>Net Amount</th>
<th class='amt' rowspan='2' scope='col'>Net Chg %</th>
<th colspan='5' scope='col'>Current Period Amounts</th>
<th colspan='3' scope='col'>Other Incomes</th>
</tr>
<tr>
<th class='empno' scope='col'>xxxxxx</th>
<th class='empname' scope='col'>Name</th>
<th class='date' scope='col'>Latest</th>
<th class='date' scope='col'>Previous</th>
<th class='amt' scope='col'>Latest</th>
<th class='amt' scope='col'>Previous</th>
<th class='amt' scope='col'>Latest</th>
<th class='amt' scope='col'>Previous</th>
<th class='amt' scope='col'>Overtime</th>
<th class='amt' scope='col'>DCP</th>
<th class='amt' scope='col'>RRP</th>
<th class='amt' scope='col'>OOP</th>
<th class='amt' scope='col'>Other</th>
<th class='oicode' scope='col'>Code</th>
<th class='amt' scope='col'>Curr</th>
<th class='amt' scope='col'>Prev</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5">Footer</td>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan='20'>
<div class="innerb">
<table class='subt' summary='script output'>
<tr>
<td class='empno' rowspan='2'>xxxxxx</td>
<td class='empname' rowspan='2'>Howya Doin</td>
<td class='date' rowspan='2'>11/18/2012</td>
<td class='date' rowspan='2'>11/04/2012</td>
<td align='right' class='amt' rowspan='2'>7,241.67</td>
<td align='right' class='amt' rowspan='2'>6,325.00</td>
<td align='right' class='pct' rowspan='2'>14.49</td>
<td align='right' class='amt' rowspan='2'>916.67</td>
<td class='dir' rowspan='2'> </td>
<td align='right' class='amt' rowspan='2'>4,246.38</td>
<td align='right' class='amt' rowspan='2'>3,660.80</td>
<td align='right' class='pct' rowspan='2'>16.00</td>
<td align='right' class='amt' rowspan='2'>916.67</td>
<td align='right' class='amt' rowspan='2'> </td>
<td align='right' class='amt' rowspan='2'> </td>
<td align='right' class='amt' rowspan='2'> </td>
<td align='right' class='amt' rowspan='2'>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 class='empno' rowspan='2'>xxxxxx</td>
<td class='empname' rowspan='2'>Hoosier Friend</td>
<td class='date' rowspan='2'>11/18/2012</td>
<td class='date' rowspan='2'>11/04/2012</td>
<td align='right' class='amt' rowspan='2'>2,174.04</td>
<td align='right' class='amt' rowspan='2'>1,961.54</td>
<td align='right' class='pct' rowspan='2'>10.83</td>
<td align='right' class='amt' rowspan='2'>212.50</td>
<td class='dir' rowspan='2'> </td>
<td align='right' class='amt' rowspan='2'>1,511.09</td>
<td align='right' class='amt' rowspan='2'>1,363.72</td>
<td align='right' class='pct' rowspan='2'>10.81</td>
<td align='right' class='amt' rowspan='2'>212.50</td>
<td align='right' class='amt' rowspan='2'> </td>
<td align='right' class='amt' rowspan='2'> </td>
<td align='right' class='amt' rowspan='2'> </td>
<td align='right' class='amt' rowspan='2'> </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 class='empno' rowspan='1'>xxxxxx</td>
<td class='empname' rowspan='1'>Wanna B. Special</td>
<td class='date' rowspan='1'>11/18/2012</td>
<td class='date' rowspan='1'>11/04/2012</td>
<td align='right' class='amt' rowspan='1'>3,282.69</td>
<td align='right' class='amt' rowspan='1'>6,565.38</td>
<td align='right' class='pct' rowspan='1'>50.00</td>
<td align='right' class='amt' rowspan='1'>3,282.69</td>
<td class='dir' rowspan='1'>Down</td>
<td align='right' class='amt' rowspan='1'>2,138.21</td>
<td align='right' class='amt' rowspan='1'>3,975.41</td>
<td align='right' class='pct' rowspan='1'>46.21</td>
<td align='right' class='amt' rowspan='1'> </td>
<td align='right' class='amt' rowspan='1'> </td>
<td align='right' class='amt' rowspan='1'> </td>
<td align='right' class='amt' rowspan='1'> </td>
<td align='right' class='amt' rowspan='1'>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 class='empno' rowspan='2'>xxxxxx</td>
<td class='empname' rowspan='2'>Frisky Muffin</td>
<td class='date' rowspan='2'>11/18/2012</td>
<td class='date' rowspan='2'>11/04/2012</td>
<td align='right' class='amt' rowspan='2'>2,223.50</td>
<td align='right' class='amt' rowspan='2'>2,020.38</td>
<td align='right' class='pct' rowspan='2'>10.05</td>
<td align='right' class='amt' rowspan='2'>203.12</td>
<td class='dir' rowspan='2'> </td>
<td align='right' class='amt' rowspan='2'>1,561.17</td>
<td align='right' class='amt' rowspan='2'>1,400.01</td>
<td align='right' class='pct' rowspan='2'>11.51</td>
<td align='right' class='amt' rowspan='2'>203.12</td>
<td align='right' class='amt' rowspan='2'> </td>
<td align='right' class='amt' rowspan='2'> </td>
<td align='right' class='amt' rowspan='2'> </td>
<td align='right' class='amt' rowspan='2'> </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 class='empno' rowspan='2'>xxxxxx</td>
<td class='empname' rowspan='2'>Howya Holdenup</td>
<td class='date' rowspan='2'>11/18/2012</td>
<td class='date' rowspan='2'>11/04/2012</td>
<td align='right' class='amt' rowspan='2'>2,110.31</td>
<td align='right' class='amt' rowspan='2'>1,984.62</td>
<td align='right' class='pct' rowspan='2'>6.33</td>
<td align='right' class='amt' rowspan='2'>125.69</td>
<td class='dir' rowspan='2'> </td>
<td align='right' class='amt' rowspan='2'>1,643.36</td>
<td align='right' class='amt' rowspan='2'>1,442.42</td>
<td align='right' class='pct' rowspan='2'>13.93</td>
<td align='right' class='amt' rowspan='2'>125.69</td>
<td align='right' class='amt' rowspan='2'> </td>
<td align='right' class='amt' rowspan='2'> </td>
<td align='right' class='amt' rowspan='2'> </td>
<td align='right' class='amt' rowspan='2'> </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 class='empno' rowspan='1'>xxxxxx</td>
<td class='empname' rowspan='1'>Failin Groovy</td>
<td class='date' rowspan='1'>11/18/2012</td>
<td class='date' rowspan='1'>11/04/2012</td>
<td align='right' class='amt' rowspan='1'>300.00</td>
<td align='right' class='amt' rowspan='1'>4,876.92</td>
<td align='right' class='pct' rowspan='1'>93.85</td>
<td align='right' class='amt' rowspan='1'>4,576.92</td>
<td class='dir' rowspan='1'>Down</td>
<td align='right' class='amt' rowspan='1'>191.79</td>
<td align='right' class='amt' rowspan='1'>3,514.42</td>
<td align='right' class='pct' rowspan='1'>94.54</td>
<td align='right' class='amt' rowspan='1'> </td>
<td align='right' class='amt' rowspan='1'> </td>
<td align='right' class='amt' rowspan='1'> </td>
<td align='right' class='amt' rowspan='1'>300.00</td>
<td align='right' class='amt' rowspan='1'> </td>
<td class="oicode"> RR2 </td>
<td class="oiamt"> 300.00 </td>
<td class="oiamt"> </td>
</tr>
<tr>
<td class='empno' rowspan='1'>xxxxxx</td>
<td class='empname' rowspan='1'>Hoosier Cousin</td>
<td class='date' rowspan='1'>11/18/2012</td>
<td class='date' rowspan='1'>11/04/2012</td>
<td align='right' class='amt' rowspan='1'>3,076.92</td>
<td align='right' class='amt' rowspan='1'>2,461.54</td>
<td align='right' class='pct' rowspan='1'>25.00</td>
<td align='right' class='amt' rowspan='1'>615.38</td>
<td class='dir' rowspan='1'> </td>
<td align='right' class='amt' rowspan='1'>2,032.98</td>
<td align='right' class='amt' rowspan='1'>1,670.48</td>
<td align='right' class='pct' rowspan='1'>21.70</td>
<td align='right' class='amt' rowspan='1'>615.38</td>
<td align='right' class='amt' rowspan='1'> </td>
<td align='right' class='amt' rowspan='1'> </td>
<td align='right' class='amt' rowspan='1'> </td>
<td align='right' class='amt' rowspan='1'> </td>
<td class="oicode"> OT1 </td>
<td class="oiamt"> 615.38 </td>
<td class="oiamt"> </td>
</tr>
<tr class='SHADE'>
<td class='empno' rowspan='1'>xxxxxx</td>
<td class='empname' rowspan='1'>Sunny Skies</td>
<td class='date' rowspan='1'>11/18/2012</td>
<td class='date' rowspan='1'>11/04/2012</td>
<td align='right' class='amt' rowspan='1'>4,913.46</td>
<td align='right' class='amt' rowspan='1'>4,211.54</td>
<td align='right' class='pct' rowspan='1'>16.67</td>
<td align='right' class='amt' rowspan='1'>701.92</td>
<td class='dir' rowspan='1'> </td>
<td align='right' class='amt' rowspan='1'>3,170.59</td>
<td align='right' class='amt' rowspan='1'>2,745.88</td>
<td align='right' class='pct' rowspan='1'>15.47</td>
<td align='right' class='amt' rowspan='1'> </td>
<td align='right' class='amt' rowspan='1'> </td>
<td align='right' class='amt' rowspan='1'> </td>
<td align='right' class='amt' rowspan='1'> </td>
<td align='right' class='amt' rowspan='1'>701.92</td>
<td class="oicode"> HOL </td>
<td class="oiamt"> 701.92 </td>
<td class="oiamt"> </td>
</tr>
<tr>
<td class='empno' rowspan='3'>xxxxxx</td>
<td class='empname' rowspan='3'>Wanna B. Somebody</td>
<td class='date' rowspan='3'>11/18/2012</td>
<td class='date' rowspan='3'>10/21/2012</td>
<td align='right' class='amt' rowspan='3'>11,788.46</td>
<td align='right' class='amt' rowspan='3'>35,365.38</td>
<td align='right' class='pct' rowspan='3'>66.67</td>
<td align='right' class='amt' rowspan='3'>23,576.92</td>
<td class='dir' rowspan='3'>Down</td>
<td align='right' class='amt' rowspan='3'>6,848.28</td>
<td align='right' class='amt' rowspan='3'>18,911.71</td>
<td align='right' class='pct' rowspan='3'>63.79</td>
<td align='right' class='amt' rowspan='3'> </td>
<td align='right' class='amt' rowspan='3'> </td>
<td align='right' class='amt' rowspan='3'> </td>
<td align='right' class='amt' rowspan='3'> </td>
<td align='right' class='amt' rowspan='3'>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 class='empno' rowspan='1'>xxxxxx</td>
<td class='empname' rowspan='1'>Sporty Cabin</td>
<td class='date' rowspan='1'>11/18/2012</td>
<td class='date' rowspan='1'>11/04/2012</td>
<td align='right' class='amt' rowspan='1'>250.00</td>
<td align='right' class='amt' rowspan='1'>3,488.46</td>
<td align='right' class='pct' rowspan='1'>92.83</td>
<td align='right' class='amt' rowspan='1'>3,238.46</td>
<td class='dir' rowspan='1'>Down</td>
<td align='right' class='amt' rowspan='1'>138.70</td>
<td align='right' class='amt' rowspan='1'>1,958.82</td>
<td align='right' class='pct' rowspan='1'>92.92</td>
<td align='right' class='amt' rowspan='1'> </td>
<td align='right' class='amt' rowspan='1'> </td>
<td align='right' class='amt' rowspan='1'> </td>
<td align='right' class='amt' rowspan='1'>250.00</td>
<td align='right' class='amt' rowspan='1'> </td>
<td class="oicode"> RR2 </td>
<td class="oiamt"> 250.00 </td>
<td class="oiamt"> </td>
</tr>
<tr>
<td class='empno' rowspan='1'>xxxxxx</td>
<td class='empname' rowspan='1'>Giant Cricket</td>
<td class='date' rowspan='1'>11/18/2012</td>
<td class='date' rowspan='1'>11/04/2012</td>
<td align='right' class='amt' rowspan='1'>288.00</td>
<td align='right' class='amt' rowspan='1'>720.00</td>
<td align='right' class='pct' rowspan='1'>60.00</td>
<td align='right' class='amt' rowspan='1'>432.00</td>
<td class='dir' rowspan='1'>Down</td>
<td align='right' class='amt' rowspan='1'>265.81</td>
<td align='right' class='amt' rowspan='1'>622.38</td>
<td align='right' class='pct' rowspan='1'>57.29</td>
<td align='right' class='amt' rowspan='1'> </td>
<td align='right' class='amt' rowspan='1'> </td>
<td align='right' class='amt' rowspan='1'> </td>
<td align='right' class='amt' rowspan='1'> </td>
<td align='right' class='amt' rowspan='1'>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 class='empno' rowspan='1'>xxxxxx</td>
<td class='empname' rowspan='1'>Blue Lagoon</td>
<td class='date' rowspan='1'>11/18/2012</td>
<td class='date' rowspan='1'>11/04/2012</td>
<td align='right' class='amt' rowspan='1'>5,927.54</td>
<td align='right' class='amt' rowspan='1'>3,236.92</td>
<td align='right' class='pct' rowspan='1'>83.12</td>
<td align='right' class='amt' rowspan='1'>2,690.62</td>
<td class='dir' rowspan='1'> </td>
<td align='right' class='amt' rowspan='1'>3,889.05</td>
<td align='right' class='amt' rowspan='1'>2,253.43</td>
<td align='right' class='pct' rowspan='1'>72.58</td>
<td align='right' class='amt' rowspan='1'> </td>
<td align='right' class='amt' rowspan='1'> </td>
<td align='right' class='amt' rowspan='1'> </td>
<td align='right' class='amt' rowspan='1'> </td>
<td align='right' class='amt' rowspan='1'>-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>