CSS: truncar células da tabela, mas caber o máximo possível

Conheça Fred. Ele é uma mesa:

<table border="1" style="width: 100%;">
    <tr>
        <td>This cells has more content</td>
        <td>Less content here</td>
    </tr>
</table>

O apartamento de Fred tem o hábito bizarro de mudar de tamanho, então ele aprendeu a esconder parte de seu conteúdo para não empurrar todas as outras unidades e empurrar a sala da sra. Whitford para o esquecimento:

<table border="1" style="width: 100%; white-space: nowrap; table-layout: fixed;">
    <tr>
        <td style="overflow: hidden; text-overflow: ellipsis">This cells has more content</td>
        <td style="overflow: hidden; text-overflow: ellipsis">Less content here</td>
    </tr>
</table>

Isso funciona, mas Fred tem uma sensação incômoda de que se a célula direita (que ele é apelidada de Celldito) desistisse de um pouco de espaço, sua célula esquerda não seria truncada na maior parte do tempo. Você pode salvar sua sanidade?

Em resumo: como as células de uma tabela podem transbordar de maneira uniforme e somente quando todas elas abrem espaço em branco?

questionAnswers(18)

yourAnswerToTheQuestion