2

我在表格单元格中有一个表格。子表高度必须与父单元格高度对齐。我设置height="100%"到子表，但它不工作。

CSS

.outer{
  border:1px solid black;
  border-collapse:collapse;
}
.inner{
  border:1px solid red;
  height:100%;
  width:auto;
}

HTML

<table class="outer">
  <tr>
    <td>
      <!-- Content Here -->
    </td>
    <td>
      <table class="inner">
        <tr>
          <td>
            <!-- Content Here -->
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
4

3 回答 3

2

浏览器不计算表格单元格的高度。至少没有好的跨浏览器 CSS 解决方案。父 TD 的相对和绝对定位会导致表格塌陷。解决方案可能是以像素为单位设置固定高度或使用 JavaScript 计算 offsetHeight。设置样式=“高度：100%；” 到父 TD 和 id="inner" 到子表。在页面加载时运行以下 JavaScript：

<!DOCTYPE HTML PUBLIC>
<html>
 <head>
 <style>
  .outer{
   border:1px solid black;
   border-collapse:collapse;
  }
  .inner{
    border:1px solid red;
    height:100%;
    width:auto;
  }
 </style>

 </head>
 <body>

  <table class="outer">
   <tr>
    <td> asdf alsdf asldf<br/>asdf alsdf asldf<br/> asdf alsdf asldf<br/>
         asdf alsdf asldf<br/>asdf alsdf asldf<br/>
    </td>
    <td style="height:100%;">
     <table class="inner" id="inner">
       <tr><td>inner content</td></tr>
     </table>
    </td>
   </tr>
  </table>
  <script type="text/javascript">
    var el = document.getElementById('inner');
    el.style.height = el.parentNode.offsetHeight + 'px';
  </script>
 </body>
</html>

如果需要，您还可以将其绑定到窗口 onresize 事件。

于 2013-08-10T06:29:26.140 回答
2

我的解决方案是给内表一个固定的高度 1px 并将内表中 td 的高度设置为 100%。无论如何，它运行良好，在 IE、Chrome 和 FF 中进行了测试！

于 2014-10-19T17:42:10.443 回答
0

使用内表为父td分配一些宽度。说。还添加以下 CSS：width="100"

对于外部 类添加position : relative;

对于内部类添加position:absolute; bottom:0; right:0; top:0;

还将 display: block 属性添加到内部类

于 2013-02-27T11:23:40.750 回答