拥有最后一行的高度占用行宽的所有空间

Question

我有一个像这样的表结构

html结构就是这个

<table class="table table-bordered">
   <thead>
       <tr>
           <th>Hierarchy</th>
           <th>Operations</th>
       </tr>
   </thead>
   <tbody>
       <tr>
            <td class="history-hierarchy" rowspan="4">
               <div><!-- Tree structure is loaded here dynamically --></div>
            </td>
        </tr>
        <tr>
             <td class="history-text">
                  Equipment A700/005 is added. 
              </td>
        </tr>
        <tr>
             <td class="history-text">
                  System instance SYSI/0002 is added. 
              </td>
        </tr>
        <tr>
             <td class="history-text">
                  Equipment 7100/001 is replaced with 7100/002  
              </td>
        </tr>
    </tbody>
</table>

如果您看到图片，Operations列的高度会根据Hierarchy列的高度自行调整，我正在寻找一些方法，如果可能的话，操作列的高度固定为{{{ 1}}以及剩下的任何空间，最后一行的操作列应该使用它。

所以操作专栏不会因为身高太高而烦恼。

有可能吗？

Answer 1

您使用的方法是正确的，您可以在我的代码段中显示的最后一行使用rowspan="2"。

table {height: 600px}
table td {border:1px solid red; vertical-align:top}
td.history-text {height: 20px}

<table class="table table-bordered">
   <thead>
       <tr>
           <th>Hierarchy</th>
           <th>Operations</th>
       </tr>
   </thead>
   <tbody>
       <tr>
            <td class="history-hierarchy" rowspan="4">
                <div>Tree structure is loaded here dynamically</div>
            </td>
            <td class="history-text">
                  Equipment A700/005 is added. 
            </td>
        </tr>
        <tr>
            <td class="history-text">
                  System instance SYSI/0002 is added. 
            </td>
        </tr>
        <tr>
             <td class="history-text" rowspan="2">
                  Equipment 7100/001 is replaced with 7100/002  
             </td>
        </tr>
       
    </tbody>
</table>