Вместо использования table-layout: fixed; для своего стола, вы можете использовать этот трюк, чтобы заставить DIV всегда занимать все пространство TD с функциональностью text-overflow: ellipsis;:
div { width: 0; min-width: 100%; }
Основной трюк - дать width что-то отличное от auto / процентов и использование минимальной ширины 100%;
div { width: 0; min-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.myTable { width: 100%; border-collapse: collapse; }
td { border: 1px solid #000; }
td.td1 { width: 100%; min-width: 50px; }
td.td2 { width: 100px; min-width: 100px; }
td.td3 { width: 150px; min-width: 150px; }
td.td4 { width: 50%; min-width: 50px; }
td.td5 { width: 50%; min-width: 50px; }
td.td6 { width: 150px; min-width: 150px; }
Стол может иметь размер жидкости или фиксированную ширину. Просто укажите минимальную ширину содержимого по мере необходимости.
<table class="myTable">
<tr>
<td class="td1"><div>Very very very long text Very very very long text Very very very long text Very very very long text</div></td>
<td class="td2"><div>Content 2</div></td>
<td class="td3"><div>Content 3 also so very lonnnnngggg</div></td>
</tr>
</table>
<table class="myTable">
<tr>
<td class="td4"><div>Very very very long text Very very very long text Very very very long text Very very very long text</div></td>
<td class="td5"><div>Content 2 has very very very many texts in a very very very long way</div></td>
<td class="td6"><div>Content 3</div></td>
</tr>
</table>
JSfiddle