Question

我从2005年开始继承了一个包含大量表格样式的Web应用程序，请参阅https://jsfiddle.net/6t7r1fma

<table style="height:50px">
  <tr style="height:100%">
    <td style="height:100%">
      <div style="overflow-y:scroll;height:100%">
        <table style="table-layout:fixed">
          <tr>
            <td>One</td>
            <td>Two</td>
          </tr>
           <tr>
            <td>Three</td>
            <td>Four</td>
          </tr>
          <tr>
            <td>Five</td>
            <td>Six</td>
          </tr>
          <tr>
            <td>Seven</td>
            <td>Eight</td>
          </tr>
          <tr>
            <td>Nine</td>
            <td>Ten</td>
          </tr>
          <tr>
            <td>Eleven</td>
            <td>Twelve</td>
          </tr>
        </table>
      </div>
    </td>
  </tr>
</table>

问题是我希望内部表格尽可能大，但包含在可以垂直滚动的溢出div中。它适用于Chrome，但不适用于Firefox（不太重要）和IE（更重要）。发生的事情是溢出div占用子表而不是父表的高度，结果是内部表完整地显示。

有什么想法？重写HTML不是一个真正的选择，所以希望有一个CSS解决方案。

Answer 1

您可以在父表及其表体，表行和表格单元格中添加显示块吗？这适用于Firefox和IE 11（不知道你必须走多远。）

https://jsfiddle.net/fwuzqo3o/

<table style="height:50px; display: block;">
  <tbody style="height: 100%; display: block;">
    <tr style="height:100%; display: block;">
      <td style="height:100%; display: block;">
        <div style="overflow-y:scroll;height:100%">
          <table style="table-layout:fixed">
            <tr>
              <td>One</td>
              <td>Two</td>
            </tr>
             <tr>
              <td>Three</td>
              <td>Four</td>
            </tr>
            <tr>
              <td>Five</td>
              <td>Six</td>
            </tr>
            <tr>
              <td>Seven</td>
              <td>Eight</td>
            </tr>
            <tr>
              <td>Nine</td>
              <td>Ten</td>
            </tr>
            <tr>
              <td>Eleven</td>
              <td>Twelve</td>
            </tr>
          </table>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Answer 2

不幸的是，表的工作方式可以概括为： 他们根据内容自定义 。您唯一的解决方案是将max-height从外部表传递到其单元格内的<div>。

如果你宁愿动态地这样做，而不改变你的标记（这是正确的方法），你可以：

使用CSS完全隐藏表格的内容，让单元格正常大小
在页面加载时（将表格添加到DOM并呈现后），获取父<table>的高度并将其作为max-height放在<div>包含的内容中在<td>中。当然，这只能在javascript中完成。

除了上述内容之外，您唯一的另一个选择就是将max-height直接放在div td内（这是以下解决方案使用javascript执行的操作）。

注意我在一般原则上添加了id来包含它，但只要你知道你在做什么，这不会影响其他任何事情，你真的不需要它。概念证明：

var divs = document.querySelectorAll('#fix>tbody>tr>td>div');
[].forEach.call(divs, function(div){
   div.style.maxHeight = div.parentNode.clientHeight + 'px';
   div.style.display = 'block';
})

#fix>tbody>tr>td>div {display: none;}

<table style="height:50px" id="fix" cellpadding="0" cellspacing="0">
  <tr style="height:100%">
    <td style="height:100%">
      <div style="overflow-y:scroll;height:100%">
        <table style="table-layout:fixed">
          <tr>
            <td>One</td>
            <td>Two</td>
          </tr>
           <tr>
            <td>Three</td>
            <td>Four</td>
          </tr>
          <tr>
            <td>Five</td>
            <td>Six</td>
          </tr>
          <tr>
            <td>Seven</td>
            <td>Eight</td>
          </tr>
          <tr>
            <td>Nine</td>
            <td>Ten</td>
          </tr>
          <tr>
            <td>Eleven</td>
            <td>Twelve</td>
          </tr>
        </table>
      </div>
    </td>
  </tr>
</table>

如果你已经在项目中加载了jQuery，你应该使用它来代替（没有经过测试，但它应该包括IE8，上面没有）：

$('#fix>tbody>tr>td>div').each(function(){
   $(this).css({
     "max-height":$(this).parent().height() + 'px',
      display:"block"
   });
})

#fix>tbody>tr>td>div {display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table style="height:50px" id="fix" cellpadding="0" cellspacing="0">
  <tr style="height:100%">
    <td style="height:100%">
      <div style="overflow-y:scroll;height:100%">
        <table style="table-layout:fixed">
          <tr>
            <td>One</td>
            <td>Two</td>
          </tr>
           <tr>
            <td>Three</td>
            <td>Four</td>
          </tr>
          <tr>
            <td>Five</td>
            <td>Six</td>
          </tr>
          <tr>
            <td>Seven</td>
            <td>Eight</td>
          </tr>
          <tr>
            <td>Nine</td>
            <td>Ten</td>
          </tr>
          <tr>
            <td>Eleven</td>
            <td>Twelve</td>
          </tr>
        </table>
      </div>
    </td>
  </tr>
</table>

请注意，由于用户代理默认样式，表格元素可能会在不同的浏览器中以较小的间距（cellpadding和cellspacing）（通常为1-2px）呈现，并且这些元素将从可用高度中扣除。您可以通过在父cellpadding上设置cellspacing和<table>为0（就像我一样）或重置<table>元素的用户代理默认样式来阻止此行为。< / p>

跨浏览器的css问题，其中height：100％不会被表中的子元素继承

2 个答案: