css - 如何将列宽设置为整个表格宽度(固定)减去另一列(针对文本自动调整)？

Question

我正在设置一个包含两列的表格的 css 属性。表格宽度是其父项(固定宽度的父项)的 100%。第一列由内容宽度自动调整(无换行)。第二列宽度应为表格宽度减去第一列宽度，溢出文本应被截断。

目前，我只需要它在 Chrome 上工作。

.table {
  width: 100%;
}

.td-value {
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

<table class="table">
  <tr class="tr">
    <td class="td-key ">Key</td>
    <td class="td-value ">A long value</td>
  </tr>
</table>

Answer 1

您可以给值列 width: 100% 并将内容包装在 flex 容器中，这会限制子项的大小。

.table {
  width: 100%;
  border-collapse: collapse;
}

td {
  padding: 0.5em;
  border: 1px solid #888;
}

.td-key {
  width: auto;
}

.td-value {
  width: 100%;
}

.flex-wrapper {
  display: flex;
}

.cell-content {
  width: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<table class="table">
  <tr class="tr">
    <td class="td-key">Key</td>
    <td class="td-value">
      <div class='flex-wrapper'>
        <div class='cell-content'>
        A very very very very 
        very very very very very 
        very very very very very 
        very very very very very 
        very very very very very 
        very very very very very 
        long value
        </div>
      </div>
    </td>
  </tr>
</table>