Сделать один столбец ячеек определите высоту строки

Question

У меня есть таблица с двумя столбцами, и я хочу, чтобы высота каждой строки определялась высотой содержимого в правом столбце, так что ячейки в левом столбце будут иметь тенденцию чтобы отрезать по вертикали.

Могу ли я сделать это в CSS? Я пробовал установить max-height=100% слева td, а также с помощью div слева td и установить вместо этого max-height=100%. Но ряды по-прежнему имеют размер, соответствующий каждой ячейке, а не игнорируют размер левой.

Answer 1

Вы можете установить DIV в position:absolute с overflow:hidden и т.д., а также установить некоторые width на td, чтобы предотвратить его от разрушения с единственным абсолютным 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>