具有第二列动态宽度和省略号的固定宽度表

Question

我需要一个只有一行的两列表。第一列中的数据应始终显示为完整，但第二列应调整大小，并且如果其中的数据不能容纳在单元格中，则该数据应为椭圆形。如果第一列进行扩展以适合其数据，则第二列应收缩，同时保持表格宽度不变。

我试图通过CSS固定表格的宽度和各种方法来实现此目的，但我不知道。看来这应该是可以实现的。

这是表格在第一列中使用不同数据的方式：

.ellipsis {
  width: 190px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

<h3>table width always the same</h3>
<table border="1">
  <tr>
    <th>
      Column1
    </th>
    <th>
      Column2
    </th>
  </tr>
  <tr>
    <td>
      <label>Display in full</label>
    </td>
    <td>
      <label class="ellipsis">Ellipsis this if length is too long</label>
    </td>
  </tr>
</table>

Answer 1

就像我在评论中提到的那样，可以使用.parent来实现。

• display: flexbox有white-space: nowrap
• 第1列中有flex-grow以使其适合其内容。
• 第2列包含.parent { display: flex; width: 350px; border: 1px solid; } .header { text-align: center; font-weight: bold; border-bottom: 1px solid; } .parent > div:first-child { white-space: nowrap; border-right: 1px solid; } .parent > div:last-child { flex-grow: 1; } .parent div:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .parent > div > div { padding: 1px; }，因此它将占用所有剩余空间。

<div class="parent">
  <div>
    <div class="header">Column1</div>
    <div>Display in full</div>
  </div>
  <div>
    <div class="header">Column 2</div>
    <div>Ellipsis this if length is too long</div>
  </div>
</div>

{{1}}

https://jsbin.com/ferixiq/3/edit?html,css,output