【问题标题】:table inside td not taking full widthtd 内的表格未占用全宽
【发布时间】:2016-11-14 10:53:22
【问题描述】:

我在 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 内的表格中,但这不起作用。

【问题讨论】:

  • 只是一个旁注,但在表中包含一个表并不是很好。
  • 是的.. 我尽量避免这种情况。但我没有看到任何其他方法可以将这些圆圈放在完全对齐的单元格内。这就是我创建表格的原因
  • 还有其他方法,但现在让我们坚持这个问题。你的例子也不完整。提供更多代码(外部表),然后您可能会更快地得到答案。对我来说,当我将它放在带有width: 100%; 的表中时,它确实会扩展。通过更多代码并显示问题,我们可以更快地为您提供帮助。
  • jsfiddle.net/wm7x2pq3 似乎工作正常。必须是一些 CSS 或其他东西。
  • 似乎工作正常。一定是其他一些 CSS 正在影响。

标签: html css


【解决方案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;
}

【讨论】:

    【解决方案2】:

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

    【讨论】:

    • 你可以使用百分比就好了,这不是问题的真正答案。
    猜你喜欢
    • 2015-08-04
    • 2021-06-08
    • 1970-01-01
    • 1970-01-01
    • 2020-02-05
    • 2013-09-07
    • 2019-03-03
    • 2020-12-05
    • 1970-01-01
    相关资源
    最近更新 更多