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

请仔细看看我到目前为止都做了些什么

<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>

名称
尼尔曼
尼尔曼

我需要显示此表占用div的全部高度，并且此表的行的高度应相等以占用整个表的空间。 也就是说，表的高度应该是div高度的100%。 每行的高度应该是div高度的30%

你知道如何做到这一点吗？另外，我希望有一个解决方案可以在大多数浏览器上运行，至少从IE8开始

---

非常感谢您的帮助。

您可以将表格定位为绝对位置。例如，将其命名为“full height”，然后添加以下css：

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

---

这将把桌子扩展到最大高度

jQuery解决方案，用于制作30%的

tr

height

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

var tr_h = t_h/100*30

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

---

通过CSS，您必须设置.inner的高度。无法继承最小高度值： 捷径是：

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

---

在

internal

div类的样式中，将

minheight:100%

更改为

height:100%

。 这就是你所需要的

（这是因为不能继承

min height

）

以下是

*{
保证金：0；
填充：0；
边界：0；
}
桌子{
身高：100%；
位置：绝对位置；
}

---

给你

你能使用javascript/jQuery吗？是的，当然，但这是准确的吗？通过CSS本身不可能吗？我不确定纯CSS是否可能，除非

。内部
有固定高度不起作用，它占用整个屏幕，我只想在div下显示它，正如你在fiddle中看到的那样，桌子在沙发里，这太棒了，我在我的项目中使用了最小高度。。。现在到处都是。。。这很有效。
*{
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>