td内的表格未占全宽

Question

我在td内有一个表，即使我将宽度设置为100％也没有全宽，这是我的html。我遇到问题的部分是在td id =＆＃34; day1＆＃34;。

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

如果我将宽度设置为1000px，则表格会延伸，星期一单元格也会延伸。我希望星期一单元格的宽度严格为100px。并且该单元内的表占据了所有空间。

我的主要目标是让桌子中心位于牢房中。我试过把align =＆＃34; center＆＃34;在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;
}

Answer 2

我通过将所有宽度替换为像素而不是使用百分比来解决问题。谢谢大家！