Question

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

HTML CODE：

<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%;
}

希望这是你想要的!!

Answer 2

使用单表和rowspan

<table border="1" style="width:100%">
  <tr><td>A</td><td>1</td></tr>
  <tr><td>B</td><td>2</td></tr>
  <tr><td>C</td><td rowspan="3">3</td></tr>
  <tr><td>D</td></tr>
  <tr><td>E</td></tr>
</table>

增加最后TR高度直到父td高度

2 个答案: