html - 使一列单元格确定行高

Question

我有一个包含两列的表格，我希望每行的高度由右列中内容的高度决定，这样左列中的单元格就会被垂直截断。

我可以在 CSS 中做到这一点吗？我已经尝试在左侧 td 设置 max-height=100%，并在左侧 td 使用 div 并在其上设置 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>