table inside td not taking full width

Question

I have a table inside a td and its not taking its full width even if i set the width to 100% this is my html. The part that I'm having problems with is on the td id="day1".

<table border="0" cellpadding="0" cellspacing="0" style="width:1190px;padding-left:6px;" ID="Table1">
  <tr>
    <td colspan="3" style="padding-top:5px;padding-bottom:4px;">
      <table border='0' cellpadding="0" cellspacing="0" width="100%">
        <tr>
          <td>
            <table border="0" width="100%">
              <tr>
                <td width="5%">Filter by:</td>
                <td width="10%">
                  <select id='selFilter' onchange="doFilter()">
                    <option value="all">All</option>
                    <option value="units">Units</option>
                    <option value="assets">Assets</option>
                    <option value="commonareas">Common Areas</option>
                  </select>
                </td>
                <td width="5%">Workgroup:</td>
                <td width="10%">
                  <select id='selFind' onchange="">
                    <option value="unit">Unit number</option>
                    <option value="astNumber">Asset number</option>
                    <option value="item">Item</option>
                    <option value="commonArea">Common Area</option>
                  </select>
                </td>
                <td width="2%" style="padding-left:2px; padding-right:5px;">Go</td>
                <td>&nbsp;</td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td>
            <table border="0" cellspacing="0" cellpadding="0" width="100%">
              <tr>
                <td id="sunHeader" align="center" height="20px" style="text-align:center;background-color:#dff3bb;font-family:Calibri">SUNDAY</td>
                <td id="monHeader" align="center" height="20px" style="text-align:center;background-color:#dff3bb;font-family:Calibri">MONDAY</td>
                <td id="tueHeader" align="center" height="20px" style="text-align:center;background-color:#dff3bb;font-family:Calibri">TUESDAY</td>
                <td id="wedHeader" align="center" height="20px" style="text-align:center;background-color:#dff3bb;font-family:Calibri">WEDNESDAY</td>
                <td id="thuHeader" align="center" height="20px" style="text-align:center;background-color:#dff3bb;font-family:Calibri">THURSDAY</td>
                <td id="friHeader" align="center" height="20px" style="text-align:center;background-color:#dff3bb;font-family:Calibri">FRIDAY</td>
                <td id="satHeader" align="center" height="20px" style="text-align:center;background-color:#dff3bb;font-family:Calibri">SATURDAY</td>
              </tr>
              <tr>
                <td id="day0" height="100px" width="100px;" style="border-left:solid;border-bottom:solid;border-right:solid;border-width:thin;vertical-align:top">a</td>
                <td id="day1" height="100px" width="100px;" style="border-left:solid;border-bottom:solid;border-right:solid;border-width:thin;">
                  <div id="day1div" style="vertical-align:top;"></div>
                  <table border="1" width="100%" cellspacing="0">
                    <tr>
                      <td>
                        <div style="background-color:#4babc5">
                          <img style='height: 30px;width:30px;' src='images/overdue.png' />
                        </div>
                      </td>
                      <td>&nbsp;</td>
                      <td>
                        <div style="background-color:#fecb00">
                          <img style='height: 30px;width:30px;' src='images/overdue.png' />
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <div>
                          <img style='height: 30px;width:30px;' src='images/sr.png' />
                        </div>
                      </td>
                      <td>
                        <div>
                          <img style='height: 30px;width:30px;' src='images/mr.png' />
                        </div>
                      </td>
                      <td>
                        <div>
                          <img style='height: 30px;width:30px;' src='images/inspections.png' />
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>&nbsp;</td>
                      <td>&nbsp;</td>
                      <td>&nbsp;</td>
                    </tr>
                  </table>
                </td>
                <td id="day2" height="100px" width="100px;" style="border-left:solid;border-bottom:solid;border-right:solid;border-width:thin;vertical-align:top">a</td>
                <td id="day3" height="100px" width="100px;" style="border-left:solid;border-bottom:solid;border-right:solid;border-width:thin;vertical-align:top">a</td>
                <td id="day4" height="100px" width="100px;" style="border-left:solid;border-bottom:solid;border-right:solid;border-width:thin;vertical-align:top">a</td>
                <td id="day5" height="100px" width="100px;" style="border-left:solid;border-bottom:solid;border-right:solid;border-width:thin;vertical-align:top">a</td>
                <td id="day6" height="100px" width="100px;" style="border-left:solid;border-bottom:solid;border-right:solid;border-width:thin;vertical-align:top">a</td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Even if I set the table width to 1000px, it just doesnt take the whole space of the table cell. Here is an image of what it appears:

If I set the width to 1000px, the table extends, and so does the Monday cell. I want the monday cell to have strictly 100px width. and the table inside that cell to be taking all the space.

My main goal is to have the table center in the cell. I tried putting align="center" in the table inside the td, but that doesnt work.

Answer 1

I fixed the issue by replacing all the width to pixels instead of using percentages. Thanks everyone!

Answer 2

Try this.

Add width="100px" attribute to the MONDAY column head like this.

<td id="monHeader" align="center" height="20px" width="100px" style="text-align:center;background-color:#dff3bb;font-family:Calibri">MONDAY</td>

And CSS

table {
    border-spacing: 0;
    border-collapse: collapse;
    table-layout: fixed;
}