html - 将最后一个 TR 高度增加到父 td 高度

Question

我有一个场景，其中一个表有一些 tr，而另一个表的 tr 比第一个表少。两个表都在 td 下。在这个 Scenerio 中，如何在 % 模式下而不是在 px 模式下增加 html 表的最后一个 tr 高度

HTML 代码:

<table border="1" style="width:100%">
<tr>
    <td style="width:50%">
        <table border="1" style="width:100%">
            <tr>
                <td>
                    A
                </td>                
            </tr>
             <tr>
                <td>
                    B
                </td>                
            </tr>
             <tr>
                <td>
                    C
                </td>                
            </tr>                 
        </table>
    </td>
    <td style="vertical-align:top">
        <table  border="1" style="width:100%;">
            <tr>
                <td>
                    1
                </td>
            </tr>
              <tr>
                <td>
                    2
                </td>
            </tr>                 
        </table>
    </td>
</tr>

jsfiddle Demo

Answer 1

像这样尝试: Demo 这只会展开右侧内容的最后一行

CSS:

table {
    height: 100%;
    width: 100%;
}
td {

}
.table {
    display: table;
    height:100%;
}
.cell {

    vertical-align: top;
    display: table-cell;
    height:100%;
}
.container {
    height: 100%;   
    -moz-box-sizing: border-box;
}

HTML:

 <table border="1" style="width:100%;" class="table">
                <tr>
                    <td>1</td>
                </tr>
                <tr>
                    <td>2</td>
                </tr>
                <tr>
                    <td class="cell">
                        <div class="container">Increse this row height till parents td height</div>
                    </td>
                </tr>
            </table>

编辑:如果您希望右栏同样展开，您可以这样使用: Demo

CSS:

table {
    height: 100%;
    width: 100%;
}

希望这就是你想要的!!