Why are my column headings not the same?

I am setting the same width for the column headers as the data rows. But they refuse to line up.

I made a fiddle here: http://jsfiddle.net/bwdc78tr/

Here is my CSS

html, body {
    height: 100%;
    margin: 0;
    width: 100%
}

#header {
    width: 100%;
    height: 60px;
    background-color: #013499;
    margin: 0;
}

#sidebar {
    background-color: #7690C5;
    bottom: 60px;
    float: left;
    height: calc(100% - 120px);
    top: 60px;
    width: 200px;
}

#content {
    background-color: #F2F2F2;
    bottom: 60px;
    float: left;
    height: calc(100% - 120px);
    top: 60px;
    width: calc(100% - 200px);
}

footer {
    clear: both;
    margin: -60px 0 0 0;
    width: 100%;
    height: 60px;
    background-color: #013499;
}

.buttons {
    float: right;
    margin-right: 20px;
}

#dropDownButton {
    vertical-align: -5px;
}

#WholeNumber {
    width: 135px;
}

#LookupSection {
    color: white;
    height: 60px;
    margin-left: 220px;
}

.WholeNumberCell {
    background-color: white;
    color: #000000;
}

#ImageDataTable {
    border: 1px solid black;
    border-spacing: 0;
    height: 100px;
    padding: 0;
    width: 100%;
}

.ImageDataCell {
    background-color: white;
    border: 1px solid black;
    color: #000000;
}

#WholeNumberDiv {
    margin-left: 100px;
    height: 0;
    overflow: auto;
}

.send_button {
    margin-right: 20px;
    text-align: right;
}

      

        
        
        
      

    

The table is dynamically created. I have read several sites on how to create tables, but they all explain basic things. Methods always break when they expand. I can't find anything that explains more advanced things, so if anyone knows any good links please post them.

I think one problem might be that the example I'm using is a sized table ( http://www.imaputz.com/cssStuff/bigFourVersion.html ) and mine is dynamic. Any ideas on how to adapt this?