使一列單元格確定行高

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>