Question

我在表格单元格中有一个表格。子表高度必须与父单元格高度对齐。我将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>

Answer 1

我的解决方案是给内表一个1px的固定高度，并将内表中td的高度设置为100％。不顾一切，它运行良好，在IE，Chrome和FF测试！

Answer 2

浏览器不计算表格单元格的高度。至少没有好的跨浏览器CSS解决方案。父TD的相对和绝对定位将导致表崩溃。解决方案可能是设置以像素为单位的高度，或使用JavaScript计算offsetHeight。设置style =“height：100％;”父TD和id =“内”到子表。在页面加载时运行以下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事件。

Answer 3

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

外部类添加position : relative;

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

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

表高度100％未设置为父高度

3 个答案: