Table Borders Do Not Align

Table Borders Do Not Align

So I am having an issue with a 'fixed' table header... I have looked at
quite a few stackoverflow questions and implemented such as :
How to scroll table's "tbody" independent of "thead"? How to make thead
tag in html static while tbody should have scroll bar
and a few more..
The issue is, when I try to put elements into the table cells, the borders
do not align (even when I set the width of the table columns
$("#id").width(viewport.width / 11)
As you can see in the picture below, the first table (the text) is
supposed to be fixed while the table below can scroll. This is a phonegap
application if that helps at all?
CSS:
table {
table-layout: fixed;
}
.mainTable {
background: rgb(255,255,255);
border-width: 0px;
border-spacing: 0px;
margin:0;
}
.mainTable thead {
vertical-align:text-top;
}
.mainTable thead td {
vertical-align:text-top;
white-space:pre-wrap;
}
.students {
background: rgb(255,255,255);
z-index:-10;
border-width: 0px;
}
HTML:
<table border = '1' id = 'mainTable' cellpadding="0" cellspacing="0">
<thead>
<caption style = 'background-color:#FFB870'>Reading Literature
(RLK)</caption>
<tr style = 'background-color:#FFB870'><td></td><td colspan =
'3'><b>Key Ideas and Details</b></td><td colspan = '3'><b>Craft and
Structure</b></td><td colspan = '3'><b>Integration of Knowledge and
Ideas</b></td><td colspan = '1'><b><center>Reading Range<br/>+<br/>
Complexity</center></b></td></tr>
<tr id = 'headerRow'>
<td id = 'tableHeader1'><div style =
'background-color:#FFB870;verticle-align:text-top;'>Sort by
</div><input type = 'button' id = 'sort1' class = 'sort1' value =
'1 -'><input type = 'button' id = 'sort2' class = 'sort2' value =
'2 -'><input type = 'button' id = 'sort3' class = 'sort3' value =
'3 -'><input type = 'button' id = 'sort4' class = 'sort4' value =
'4 -'><input type = 'button' id = 'desort' class = 'desort' value
= 'Unsort'></td>
<td class = 'tabh' id = 'tableHeader2' align="center"
valign="top"><div id = 'tablesubHeader'>RL.K1</div>With prompting
and support, ask and answer questions about key details in a
text.</td>
<!--Omitted Rest for Space//-->
</tr>
</thead>
</table>
<div class = 'tablecontent'>
<table>
<tbody class = 'students' id = 'students'>
</tbody>
</table>
I am using Jquery to fill the table with those select elements and am just
setting the width. of both the column and the element..
function renderPage(totalRows, totalCols, domain, element, grade,
domainAbbrev, subcat) { var viewport = { width : $(window).width(), height
: $(window).height() }; var tabwidth = Math.ceil(viewport.width /
totalCols); var studentA = new Array();
for(var i = 0; i < totalRows; i++) {
if(i % 2 == 0) {
var bgCOL = "#FFFFFF";
} else {
var bgCOL = "#80CCFF";
}
if(i % 10 == 0 && i != 0) {
$("#students").append("<tr>");
for(var t = 0; t < totalCols; t++) {
if(t == 0) {
$("#students").append("<td class =
'reccurenth'>Students:</td>");
} else {
$("#students").append("<td class = 'reccurenth'>" +
subcat + t + "</td>");
}
}
$("#students").append("</tr>");
}
$("#students").append("<tr class = 'inputf' id = '" + i + "'>");
for(var g = 1; g <= totalCols; g++) {
if(g == 1) {
$("#" + i).append("<td id = 'studenttd" + i + "' style =
'background-color:" + bgCOL + ";'><input type = 'text' style
= 'margin:0 auto;' id = 'student" + i + "' name = 'student "
+ i + "' placeholder = 'Student'></td>");
$("#studenttd" + i).width(tabwidth);
studentA[i] = "";
} else {
$("#" + i).append("<td id = 'slot" + i + g + "' style =
'background-color:" + bgCOL + ";'><select id = 'sel" + i + g
+ "' name = '" + i + " " + g + "'><option value =
'none'></option><option value = '1'>1</option><option value =
'2'>2</option><option value = '3'>3</option><option value =
'4'>4</option></select></td>");
$("#slot" + i + g).width(tabwidth);
}
}
$("#students").append("</tr>");
}
}
Any insight that anyone can provide on how to align the columns would be
appreciated!!

Thanks!