Таблица фиксированной ширины с динамикой второго столбца * ширина c и многоточием

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

Как я уже упоминал в комментариях, это может быть достигнуто с помощью flex-box.

• .parent имеет display: flexbox
• В столбце 1 есть white-space: nowrap, чтобы сделать его соответствует его содержимому.
• В столбце 2 есть flex-grow, поэтому он займет все оставшееся пространство.

.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>

https://jsbin.com/ferixiq/3/edit?html, css, выход