如何将列宽设置为整个表格宽度（固定）减去另一列（针对文本自动调整）？答案

【问题标题】：How do I set a column width to be the whole table width (fixed) minus another column (auto adjusted for text)?如何将列宽设置为整个表格宽度（固定）减去另一列（针对文本自动调整）？
【发布时间】：2019-07-22 18:50:09
【问题描述】：

我正在设置一个包含两列的表的 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>

【问题讨论】：

这里没有可能，或者您将表格布局重置为固定并且可能会发生溢出，因此 text-overflow ，但除非您设置每个列的宽度相同 .. 固定宽度. Flex 或 grid 可以做得更好（flx:x; 或 1fr ），但你的桌子怎么样？ flex 或 grid 选项在这里重置表格的显示属性是否有效？
这是我之前评论codepen.io/gc-nomade/pen/KOdYvP中的一个例子，请澄清你的问题。

标签： css

【解决方案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>

【讨论】：