Если Javascript приемлем, я собрал быструю процедуру, которую вы могли бы использовать в качестве отправной точки. Он динамически пытается адаптировать ширину ячейки, используя внутреннюю ширину диапазона, в ответ на события изменения размера окна.
В настоящее время предполагается, что каждая ячейка обычно получает 50% ширины строки, и она свернет правую ячейку, чтобы сохранить максимальную ширину левой ячейки, чтобы избежать переполнения. Вы можете реализовать гораздо более сложную логику балансировки ширины, в зависимости от ваших вариантов использования. Надеюсь, это поможет:
Разметка для строки, которую я использовал для тестирования:
<tr class="row">
<td style="overflow: hidden; text-overflow: ellipsis">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</td>
<td style="overflow: hidden; text-overflow: ellipsis">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</td>
</tr>
JQuery, который подключает событие изменения размера:
$(window).resize(function() {
$('.row').each(function() {
var row_width = $(this).width();
var cols = $(this).find('td');
var left = cols[0];
var lcell_width = $(left).width();
var lspan_width = $(left).find('span').width();
var right = cols[1];
var rcell_width = $(right).width();
var rspan_width = $(right).find('span').width();
if (lcell_width < lspan_width) {
$(left).width(row_width - rcell_width);
} else if (rcell_width > rspan_width) {
$(left).width(row_width / 2);
}
});
});