2017-01-24 3 views
2

親テーブルの高さを100%にする必要があります。 私は複雑なデータ構造を持ついくつかの角度ng-repeatを使用しています。私はhtml構造を変更するオプションがありません。親テーブルの高さを100%にする

親テーブルの高さを100%に設定する方法を教えてください。私はたくさんのオプションを試しましたが、うまくいかなかったのです。

.parent { 
 
    border: 1px solid #000; 
 
    border-collapse: collapse; 
 
} 
 
.parent td, 
 
.parent tr, 
 
.parent th { 
 
    border: 1px solid #000; 
 
} 
 
.inner { 
 
    height: 100%; 
 
}
<table class='parent'> 
 
    <tr> 
 
    <th>head</th> 
 
    <th>head</th> 
 
    <th>Description</th> 
 
    <th> 
 
     <table> 
 
     <tr> 
 
      <th>head</th> 
 
      <th>head</th> 
 
      <th>head</th> 
 
      <th>head</th> 
 
     </tr> 
 
     </table> 
 
    </th> 
 
    </tr> 
 
    <tr> 
 
    <td>values</td> 
 
    <td>values</td> 
 
    <td>Description goes here, Description goes here, Description goes here, Description goes here, Description goes here, Description goes here, Description goes here, Description goes here, Description goes here, Description goes here, Description goes 
 
     here, Description goes here, Description goes here, Description goes here, Description goes here, Description goes here, Description goes here,</td> 
 
    <td> 
 
     <table class='inner'> 
 
     <tbody> 
 
      <tr> 
 
      <td>H1 Val</td> 
 
      <td>H2 Val</td> 
 
      <td>H3 Val</td> 
 
      <td>H4 Val</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </td> 
 
    </tr> 
 
</table>

答えて

2

100%にも.parentの高さを設定し、それはそれです。

So;

.parent{ 
     border:1px solid #000; 
     border-collapse:collapse; 
     height: 100%; 
    } 
+0

偉大な。ありがとう。私たちが解決できるなら、もう一度助けてください。私が内側のテーブルtdを作り、国境を作ったとき。それは親に触れていない。内側のテーブル、tbody、trタグが原因である可能性があります。どうすれば克服できますか?更新されたjsfiddleリンクを見つける。 https://jsfiddle.net/bvsrao90/9xprmydj/1/ – venkat

+0

親tdのマージンを削除します。 'border-spacing:0px;'を追加します。 .innerテーブルに。 – Tuur

関連する問題