Вы можете использовать flexbox для этого
CSS
table {
width:100%;
border: 1px solid black;
border-collapse: collapse;
}
td + td {
border-left: 1px solid black;
}
tr {
display: flex;
align-items: stretch;
}
td:last-child {
flex: 1;
background: yellow;
display:inline-block;
/* to keep IE happy */
}
FIDDLE (Изменить размер окна браузерачтобы увидеть это в действии)
table {
width: 100%;
border: 1px solid black;
border-collapse: collapse;
}
td + td {
border-left: 1px solid black;
}
td:last-child {
background: yellow;
}
<table>
<tr>
<td>One Two Three</td>
<td>Two Three Four</td>
<td>Three Four FiveThree Four FiveThree Four FiveThree Four FiveThree Four Five</td>
<td>Four Five Six</td>
<td> f</td>
</tr>
</table>
Примечание:
В IE 10-11 есть проблема, заключающаяся в том, что встроенные элементы (и, по-видимому, также и ячейки таблицы) не обрабатываются как flex-items.
Эта проблема задокументирована Филиппом Уолтоном здесь , и обходной путь (из приведенного выше поста):
Эту проблему можно избежать, добавивне встроенное значение отображения элементов, например, блока, встроенного блока, сгибания и т. д.
Кстати: следующее выглядит так же, как та же скрипка вышекак
без использования flexbox - Обратите внимание, что последний
td на самом деле не заполняет оставшееся пространство, а скорее занимает свое собственное естественное пространство - это то, что ОП НЕ хотело.