Vamos dizer que minhas colunas em uma mesa sãoid, name, descriptionephone. odescription coluna é 1-255 caracteres, mas o id é apenas no máximo 3 caracteres.

Eu gostaria que as colunas fossem dimensionadas adequadamente em vez de cada coluna ser do mesmo tamanho. E eu gostaria dodescription coluna para transbordar para reticências quando a janela é muito pequena para caber o conteúdo em sua totalidade.

table-layout:fixed; é a maneira padrão de fazertext-overflow: ellipsis; trabalho, mas redimensiona todas as colunas para o mesmo tamanho. Eu preferiria manter as largurasauto em vez de fixo.

Você pode ajudar?

Aqui é meujsFiddle: http://jsfiddle.net/RQhkk/1/

Aqui está uma captura de tela do que estou lidando:

Note comoTable 1 faz todas as colunas do mesmo tamanho? Isso é horrível.

Note comoTable 2 dimensiona as colunas com base no conteúdo? Isso é bom. Exceto quando o conteúdo é muito longo:Table 3. Então não cabe. Nesse caso, eu gostaria de transbordar para reticências.

E aqui está minha tabela html e código css:

<div id="t1">
<table>
    <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th class="ellipsis">description</th>
            <th>phone</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>alpha</td>
            <td class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            <td>555-555-5555</td>
        </tr>
        <tr>
            <td>2</td>
            <td>beta</td>
            <td class="ellipsis">Sed et nulla neque.</td>
            <td>555-555-5555</td>
        </tr>
        <tr>
            <td>3</td>
            <td>gamma</td>
            <td class="ellipsis">Morbi imperdiet neque ut lorem rhoncus fermentum.</td>
            <td>555-555-5555</td>
        </tr>
    </tbody>
</table>
</div>

<style>
#t1 table {
    table-layout:fixed;
    width:100%;
}
#t1 td {
    white-space: nowrap;
}
#t1 td.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    word-wrap: break-word;
}
</style>

Se eu remover otable-layout: fixed; as larguras das colunas são o que você esperaria - dimensionado para o conteúdo. Infelizmente, não consigo fazer as reticências funcionarem sem o layout fixo. Onde eu estou errando?