html - td 内的表格不占用全宽

Question

我在 td 中有一个表格，即使我将宽度设置为 100%，它也没有占据它的全部宽度这是我的 html。我遇到问题的部分是 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>

即使我将表格宽度设置为 1000 像素，它也不会占用表格单元格的整个空间。这是它出现的图像:

如果我将宽度设置为 1000 像素，表格会扩展，星期一单元格也会扩展。我希望星期一单元格的宽度严格为 100 像素。该单元格内的表格占用了所有空间。

我的主要目标是让表格在单元格中居中。我尝试将 align="center"放在 td 内的表格中，但这不起作用。

Answer 1

试试这个。

像这样将 width="100px" 属性添加到 MONDAY 列标题。

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

和 CSS

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