使一列单元格确定行高

Question

我有一个有两列的表格，我希望每行的高度由右列中内容的高度决定，这样左列中的单元格将倾向于垂直切断。

我可以在CSS中执行此操作吗？我尝试在左侧td上设置max-height=100%，并在左侧td内使用div，并在其上设置max-height=100%。但是这些行的大小仍然适合任何一个最大的单元格，而不是忽略左侧单元格的大小。

Answer 1

您可以overflow:hidden等股利设置为position:absolute，并在td设置一些width，以防止它里面的唯一绝对DIV崩溃。

table { 
 
    width: 200px; 
 
} 
 
td { 
 
    width: 50%; 
 
} 
 
td:first-child { 
 
    position: relative; 
 
} 
 
td:first-child > div { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    overflow: hidden; 
 
}

<table border="1"> 
 
    <tr> 
 
    <td> 
 
     <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
 
    </td> 
 
    <td>Lorem ipsum</td> 
 
    </tr> 
 
</table>