Question

rendering and code in chrome

我无法弄清楚为什么嵌套表（标记为红色）没有占据外部（标记为绿色）表格单元格（跨越8行）的整个高度。这曾经有用，但较新的浏览器不允许嵌套表占据外表单元格的整个高度。具有兼容性视图的IE11仍然显示占用全高，其他所有都没有。我需要在代码中更改什么？向表中添加height =“100％”没有帮助。

代码：

    <tr>
      <td class="NameColumnCaption" valign="top" bgcolor="#c0c0c0" style="height: 19px;">11:00</td>
      <td class="weekdetails" bgcolor="#f0f0f0" rowspan="8" colspan="10" style="cursor:pointer" ondblclick="modifyMeeting(&quot;212&amp;dispUser=Janice%20Elland&amp;globObjID=&quot;, 9);" onclick="detailview(&quot;oneweek.asp?Q=Janice%20Elland&amp;D=-4&quot;);hN(33);" onmousemove="sN(33)" onmouseout="hN(33)">
        <table class="tdnor" width="100%" id="tbl" cellspacing="0" cellpadding="3" bgcolor="white">
          <tbody>
            <tr>
              <td width="5" bgcolor="#99ccff" style="height: 19px;"><img src="b1.gif" width="2px" height="10px" border="0"></td>
              <td class="WeekDetails" valign="top" style="height: 19px;">
                <font color="#0000cc">11:15-15:15</font><br>
                <font color="#000000">Supplier Meeting</font> (Lancashire)Janice Elland<br>
                <table width="100%" border="0" cellpadding="0" cellspacing="0"></table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
      <td valign="top" class="WeekDetails" bgcolor="#f0f0f0" colspan="10" onmousemove="sN(0)" onmouseout="hN(0)" onclick="Meeting2(&quot;&amp;D=-2&quot;,&quot;11&quot;,&quot;Janice%20Elland&quot;);" style="height: 19px;"></td>
      <td valign="top" class="WeekDetails" bgcolor="#f0f0f0" colspan="10" onmousemove="sN(0)" onmouseout="hN(0)" onclick="Meeting2(&quot;&amp;D=-1&quot;,&quot;11&quot;,&quot;Janice%20Elland&quot;);" style="height: 19px;"></td>
      <td valign="top" class="WeekDetails" bgcolor="#95cc68" colspan="10" onmousemove="sN(0)" onmouseout="hN(0)" onclick="Meeting2(&quot;&amp;D=0&quot;,&quot;11&quot;,&quot;Janice%20Elland&quot;);" style="height: 19px;"></td>
      <td class="NameColumnCaption" valign="top" bgcolor="#c0c0c0" style="height: 19px;">11:00</td>
    </tr>

使用额外的div和table-layout：按建议修复： screenshot

    <tr>
      <td class="NameColumnCaption" valign="top" bgcolor="#c0c0c0" style="height: 19px;">11:00</td>
      <td class="weekdetails" bgcolor="#f0f0f0" rowspan="8" colspan="10" style="cursor:pointer" ondblclick="modifyMeeting(&quot;212&amp;dispUser=Janice%20Elland&amp;globObjID=&quot;, 9);" onclick="detailview(&quot;oneweek.asp?Q=Janice%20Elland&amp;D=-5&quot;);hN(33);" onmousemove="sN(33)" onmouseout="hN(33)">
        <div style="height: 100%; min-height: 70px;">
          <table width="100%" id="tbl" cellspacing="0" style="table-layout: fixed;border:1px solid #404040;" cellpadding="3" bgcolor="white">
            <tbody>
              <tr>
                <td width="5" bgcolor="#99ccff" style="height: 19px;"><img src="b1.gif" width="2px" height="10px" border="0"></td>
                <td class="WeekDetails" valign="top" style="height: 19px;">
                  <font color="#0000cc">11:15-15:15</font><br>
                  <font color="#000000">Supplier Meeting</font> (Lancashire)Janice Elland<br>
                  <table width="100%" border="0" cellpadding="0" cellspacing="0"></table>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </td>
      <td valign="top" class="WeekDetails" bgcolor="#f0f0f0" colspan="10" onmousemove="sN(0)" onmouseout="hN(0)" onclick="Meeting2(&quot;&amp;D=-3&quot;,&quot;11&quot;,&quot;Janice%20Elland&quot;);" style="height: 19px;"></td>
      <td valign="top" class="WeekDetails" bgcolor="#f0f0f0" colspan="10" onmousemove="sN(0)" onmouseout="hN(0)" onclick="Meeting2(&quot;&amp;D=-2&quot;,&quot;11&quot;,&quot;Janice%20Elland&quot;);" style="height: 19px;"></td>
      <td valign="top" class="WeekDetails" bgcolor="#f0f0f0" colspan="10" onmousemove="sN(0)" onmouseout="hN(0)" onclick="Meeting2(&quot;&amp;D=-1&quot;,&quot;11&quot;,&quot;Janice%20Elland&quot;);" style="height: 19px;"></td>
      <td class="NameColumnCaption" valign="top" bgcolor="#c0c0c0" style="height: 19px;">11:00</td>
    </tr>

Answer 1

更新2

我制作了一张新桌子，因为OP提供的小提琴过于混乱。幸运的是，它说明了问题所在。嵌套表没有扩展rowspanned td的完整高度，因此td with rowspan="8"内的表只有2行而不是8行。

最重要的事情是：

（对于此示例，具有嵌套表的td为：.parent）

将min-height: 100%和min-width: 100%;应用于.parent。
将td（即同一列中的.parent）下的td评论为.parent rowspan的总和 - 1
- 离。 <td class="parent" rowspan="5"...>
- .parent位于第一列/第三行。
- 注释掉下一个td：
  1. 第一栏/第四行
  2. 第一栏/第五行
  3. 第一栏/第六行
  4. 第一栏/第七行
构建嵌套表时，您：
- 与<tr> .parent
- 每个<tr>应该有相同数量的列
- 不必为tbody

以下演示注释了注释，指明了获得所需效果所需的条件。我松散地使用术语 required ，因为你可能必须调整某些测量值（即填充，宽度等）

https://plnkr.co/edit/u6CpPDDF3hMC5JI1S5BY?p=preview

更新1

由于这涉及另一个表中的表，请尝试：

<table style="table-layout: fixed; display: inline-table"....>

使用

.css文件或<style>阻止
- table {table-layout: fixed;}

OR

内联
- <table style="table-layout: fixed; ....>

您可能需要在单元格中添加div并增加其高度以增加表格的高度。

<td>
 <div style="height: 100%; min-height: 70px;">
      "Cell Content"
 </div>
 </td>

如果您的表格已生成，并且您无法在加载HTML之前对其进行修改（即编辑代码）。可以通过编程方式执行此操作，如果您这样做，请告诉我，我也会帮助您。

嵌套在rowspan表格单元格中的表格不会在所有浏览器中填充单元格高度

1 个答案:

更新2

更新1