Table Columns not staying the same width

I'm working on a Calendar using tables and divs. The columns are not staying the width I set them in the CSS file. They should all be 20pxs; The Row they are in width is set to 100% and the table width is set to 100%. The Div that holds everything width is set to 1100px and has overflow set to auto.

The columns width still try to change to fit in the row. How can I set it so all the columns in the row are 20px wide.

CSS Code for the columns.

.WeekDay
{
    text-align:center;
    background-color:transparent;
    width:20px;
    height:27px;
    border-color:Black;
    border-width:thin;
    border-style:solid;
}

.WeekendDay
{
    text-align:center;
    background-color:transparent;
    background-image:url(http://i1005.photobucket.com/albums/af175/zombi开发者_开发问答eChan51/1px_transparency.png);
    background-repeat:repeat;
    width:20px;
    height:27px;
    border-color:Black;
    border-width:thin;
    border-style:solid;
}

Code for Table (This gets built by JavaScript, There's a date number and a at the end, it just didn't get copy paste from Dragon Fly.)

table cellspacing="0px" style="width:100%;">
<col width="20px"/>
<tr class="DateRow">
<td id="January1DateColumn" class="WeekDay">
<td id="January2DateColumn" class="WeekendDay">
<td id="January3DateColumn" class="WeekendDay">
<td id="January4DateColumn" class="WeekDay">
<td id="January5DateColumn" class="WeekDay">
<td id="January6DateColumn" class="WeekDay">
<td id="January7DateColumn" class="WeekDay">
<td id="January8DateColumn" class="WeekDay">
<td id="January9DateColumn" class="WeekendDay">
<td id="January10DateColumn" class="WeekendDay">
<td id="January11DateColumn" class="WeekDay">
<td id="January12DateColumn" class="WeekDay">
<td id="January13DateColumn" class="WeekDay">
<td id="January14DateColumn" class="WeekDay">
<td id="January15DateColumn" class="WeekDay">
<td id="January16DateColumn" class="WeekendDay">
<td id="January17DateColumn" class="WeekendDay">
<td id="January18DateColumn" class="WeekDay">
<td id="January19DateColumn" class="WeekDay">
<td id="January20DateColumn" class="WeekDay">
<td id="January21DateColumn" class="WeekDay">
<td id="January22DateColumn" class="WeekDay">
<td id="January23DateColumn" class="WeekendDay">
<td id="January24DateColumn" class="WeekendDay">
<td id="January25DateColumn" class="WeekDay">
<td id="January26DateColumn" class="WeekDay">
<td id="January27DateColumn" class="WeekDay">
<td id="January28DateColumn" class="WeekDay">
<td id="January29DateColumn" class="WeekDay">
<td id="January30DateColumn" class="WeekendDay">
<td id="January31DateColumn" class="WeekendDay">
</tr>
</table>

Screen shot: http://i.stack.imgur.com/TXxPp.png

Add JavaScript snippet.

for (var dateNum in this.Months[monthNum].Days) {
                var Date = this.Months[monthNum].Days[dateNum];
                var NewDateColumn = document.createElement('td');
                NewDateColumn.id = Date.MonthName + Date.DayNum + "DateColumn";
                NewDateColumn.className = "MonthTd";
                NewDateColumn.innerText = Date.DayNum;
                if (Date.IsWeekend == true) {
                    NewDateColumn.className = "WeekendDay";
                }
                else if (Date.IsWeekend == false) {
                    NewDateColumn.className = "WeekDay";
                }

                DateRow.appendChild(NewDateColumn);

            }

---

Make sure the "cells" are at the same height in a row. I'm not sure what markup you have, but your floated divs may behave strange when they are different heights.

---

Try not setting the size of the table and row. The columns will then set the width of the table.

EDIT: Try this at the top of your table.

<table>
<tr class="DateRow">
<td id="January1DateColumn" class="WeekDay">x</td>

Add the following class to your CSS and your table entry to collapse the borders between cells.

.DateTable {
    border-collapse: collapse; // 'cellspacing' equivalent
}

---

Thanks for everyones help, i just put a div element inside of the columns with the set size and that worked

---

AFAIK, you can't really force table columns to get fixed width, one way would be to wrap table cell content in a fixed-width block element having overflow: hidden, you'd get your width but some of the content might get hiddden.