Избегайте переполнения таблицы HTML

Question

Я пытаюсь создать таблицу HTML с тремя столбцами и хотел бы установить ширину двух столбцов (в данном случае первый и третий) на «auto» (ширина, которая соответствует их содержимому). Я бы хотел, чтобы третий столбец (средний) занял оставшееся место.

Это прекрасно работает, если содержимое среднего столбца уже, чем оставшаяся ширина среднего столбца, но если содержимое занимает большую ширину, чем столбец, чем я получаю переполнение таблицы.

Есть ли способ достичь этого даже с длинными текстами в средней колонке? (Желаемое поведение: «вырезать» текст среднего столбца, если необходимо).

<div style="background-color:orange; width:200px; padding: 5px">
  <table style="background-color: pink">
    <tr>
      <td style="background-color:red">
        123456
      </td>
      <td style="background-color:yellow; width:100%">
        1234567890123
      </td>
      <td style="background-color:green">
        123456
      </td>
    </tr>
  </table>
</div>

Answer 1

Я нашел это! Решением является комбинация float и overflow, а не таблицы:

<div style="background-color:orange; width:200px !important; padding: 5px">
    <div style="background-color: pink">
        <div style="background-color:red; float:left">
            123456
        </div>
        <div style="background-color:green; float:right">
            123456
        </div>
        <div style="background-color:yellow; overflow:hidden">
            1234567890123456
        </div>
    </div>
</div>  

Answer 2

Не думайте, что есть способ сделать это с помощью стола. Вот с flex, если у вас получится.

.fake_table {
  width: 150px;
  padding: 5px;
  display: flex;
  background-color:orange;
}

.row {
    display: flex;
    box-sizing: border-box;
    background-color: pink;
    width: 100%;
}

.col1, .col3 { flex: 1; }
.col2 { overflow: hidden; }
  
.col1 { background-color:red}
.col2 { background-color:yellow; }
.col3 { background-color:green }

<div class="fake_table">
  <div class="row">
    <div class="col1">123456</div>
    <div class="col2">1234567890123</div>
    <div class="col3">123456</div>
  </div>
</div>