HTML 表格的高度为 100%，行的高度均等。如何使它成为可能？

HTML table with 100% of height, and the rows equally divided in height. How to make it possible?

提问by Nirman

Please go through this fiddleto see what I have tried so far.

请仔细阅读这个小提琴，看看我到目前为止已经尝试过什么。

<div class="outer">
    <div class="inner">
        <table style="background-color: red; width:100%; height:100%;">
            <tr style="background-color: red; width:100%; min-height:30%;">
                <td>Name</td>
            </tr>
            <tr style="background-color: blue; width:100%; min-height:30%;">
                <td>Nirman</td>
            </tr>
            <tr style="background-color: blue; width:100%; min-height:30%;">
                <td>Nirman</td>
            </tr>    
        </table>
    </div>
</div>

I need to display this table occupying full height of the div, and rows of this table should be equal in height to occupy space of full table. That means, table's height should be 100% of div's height. and each row's height should be 30% of div's height.

我需要显示这个表格占据整个 div 高度，并且这个表格的行高度应该相等以占据整个表格的空间。这意味着，表格的高度应该是 div 高度的 100%。每行的高度应该是 div 高度的 30%。

Any idea of how to achieve this? Also, I would like a solution that should work on most of the browsers, at least, starting from IE 8.

知道如何实现这一目标吗？另外，我想要一个解决方案，它应该适用于大多数浏览器，至少从 IE 8 开始。

Any help on this much appreciated.

对此非常感谢的任何帮助。

回答by Nibhrit

In styles of the innerdiv class, change min-height:100%to height:100%. That's all you need!

在innerdiv 类的样式中，更改min-height:100%为height:100%. 这就是你所需要的！

(This is because min-heightcan not be inherited)

（这是因为min-height不能继承）

Here's the jsfiddle

这是jsfiddle

回答by G-Cyrillus

Through CSS , you have to set height of .inner . min-height value cannot be inherited : http://codepen.io/anon/pen/yuEkAa short cut would be :

通过 CSS，您必须设置 .inner 的高度。不能继承最小高度值：http: //codepen.io/anon/pen/yuEkA捷径是：

html, body , .outer, .inner {
    height:100%;
    width:100%;
    margin:0;
} 

回答by Francesco Novy

You can position the table absolute. For example, give it the class "full-height", and then add the following css:

您可以绝对定位表。例如，给它类“full-height”，然后添加以下css：

table.full-height {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
}

This will expand the table to the full height!

这会将桌子扩展到全高！

回答by Lasithds

*{
margin:0;
padding:0;
border:0;
}
table{
height:100%;
position:absolute;
}


<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
   <td bgcolor="#FF0000">&nbsp;</td>
  </tr>
  <tr>
   <td bgcolor="#00FF00">&nbsp;</td>
  </tr>
  <tr>
   <td bgcolor="#0000FF">&nbsp;</td>
  </tr>
</table>

Here's a fiddle!

这是一把小提琴！

回答by Pumpkinpro

jQuery solution for making 30% trheight

用于制作 30%tr高度的jQuery 解决方案

var t_h = $('.inner').height()

var tr_h = t_h/100*30

$('tr').height(tr_h)
$('table').height(t_h);

jsfiddle

提琴手