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 を計算することです。style="height: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 に答える