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?
<!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>
When you use nested tables so that the data rows are in an inner table, it becomes very difficult to make the columns aligned. The reason is that the columns of the inner table are not connected with the columns of the outer table in any way.
In this case, it seems that part of the differences is caused by different horizontal paddings in the header cells vs. the data cells. So check the padding settings (it's probably best to reduce the paddings in this process, since the table is very wide and large padding makes the situation worse).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.