如何将列宽设置为整个表格宽度(固定)减去另一列(根据文本自动调整)

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>