Largura automática da coluna da tabela CSS

100

Dado o seguinte, como faço para definir o tamanho automático da última coluna para seu conteúdo? (A última coluna deve dimensionar automaticamente a largura do conteúdo. Suponha que eu tenha apenas 1 elemento li que deve encolher vs. ter 3 elementos li etc):

            <table cellspacing="0" cellpadding="0" border="0">
            <thead><!-- universal table heading -->
                <tr>
                    <td class="tc first"><input type="checkbox" value="true" name="data-1-check-all" id="data-1-check-all"></td>
                    <td class="tc">Type</td>
                    <th>File</th>
                    <th>Sample</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Division 1</td>
                    <td>Division 2</td>
                    <td>Division 3</td>
                    <td>Division 4</td>
                    <td>Division 5</td>
                </tr>
                <tr>
                    <td>Division 1</td>
                    <td>Division 2</td>
                    <td>Division 3</td>
                    <td>Division 4</td>
                    <td class="last">
                        <ul class="actions">
                            <li><a class="iconStats" href="#">Statystyki</a></li>
                            <li><a class="iconEdit" href="#">Edytuj</a></li>
                            <li><a class="iconDelete" href="#">Usuń</a></li>

                        </ul>
                    </td>
                </tr>
            </tbody>
        </table>

Css:

table { table-layout: fixed; width: 100%; }
table tr { border-bottom:1px solid #e9e9e9; }
table thead td, th {border-left: 1px solid #f2f2f2; border-right: 1px solid #d5d5d5; background: #ddd url("../images/sprites4.png") repeat-x scroll 0 100% ; font-weight: bold; text-align:left;}
table tr td, th { border:1px solid #D5D5D5; padding:15px;}
table tr:hover { background:#fcfcfc;}
table tr ul.actions {margin: 0;}
table tr ul.actions li {display: inline; margin-right: 5px;}
ShaneKm
fonte

Respostas:

218

O seguinte resolverá seu problema:

td.last {
    width: 1px;
    white-space: nowrap;
}

Solução flexível baseada em classe

E uma solução mais flexível é criar uma .fitwidthclasse e aplicá-la a qualquer coluna que você queira para garantir que seu conteúdo caiba em uma linha:

td.fitwidth {
    width: 1px;
    white-space: nowrap;
}

E então em seu HTML:

<tr>
    <td class="fitwidth">ID</td>
    <td>Description</td>
    <td class="fitwidth">Status</td>
    <td>Notes</td>
</tr>
Doug Amos
fonte
3
Funciona perfeitamente! (meu caso tendo a largura da tabela de 100% e nenhuma outra coluna tem larguras. Apliquei isso a uma coluna). Testado no IE7 /
8/9
uau, nunca pensei que isso fosse possível com tabelas html. Obrigado!
kulpae
14
Em vez de adicionar manualmente a classe '.last', você pode apenas fazer 'td: last-child' como seletor.
T.Ho
3
Esta solução funciona bem sem table-layout: fixedque seja definido no css na questão jsfiddle.net/hCkch/1
David Sherret
1
Effing brilhante, cara! Truque realmente inteligente para "priorizar" certas colunas para garantir que não sejam comprimidas em várias linhas por colunas de "texto" grandes, como "Descrição" ou "Notas". Agradável! Para torná-lo ainda mais útil, eu chamaria a classe .fitwidthe, em seguida, apenas definiria a classe nas colunas que você não deseja que vão para várias linhas. Vou editar sua resposta para adicionar isso.
Joshua Pinter
25

Se você quiser ter certeza de que a última linha não vai quebrar e, portanto, dimensionar da maneira que você deseja, dê uma olhada em

td {
 white-space: nowrap;
}
Sander
fonte
1

Você pode especificar a largura de todas as células da tabela, exceto as últimas, e adicionar um layout de tabela: fixo e uma largura para a tabela.

Você poderia definir

table tr ul.actions {margin: 0; white-space:nowrap;}

(ou defina isso para o último TD como Sander sugeriu).

Isso força os LIs em linha a não quebrar. Infelizmente, isso não leva a um novo cálculo de largura no UL que o contém (e neste TD pai) e, portanto, não ajusta automaticamente o último TD.

Isso significa: se um elemento embutido não tiver largura fornecida, a largura de um TD é sempre calculada automaticamente primeiro (se não for especificada). Em seguida, seu conteúdo embutido com esta largura calculada é renderizado e a white-spacepropriedade é aplicada, estendendo seu conteúdo além dos limites calculados.

Então eu acho que não é possível sem ter um elemento dentro do último TD com uma largura específica.

acme
fonte
nada de bom. isso é exatamente o que estou tentando evitar. não quero especificar as larguras das col. as colunas devem ser dimensionadas automaticamente e a última coluna deve ser dimensionada para o conteúdo dentro dela.
ShaneKm
Você pode fornecer as definições de CSS para as classes que usou?
acme
-2

use a largura automática e mínima ou máxima como esta:

td {
max-width:50px;
width:auto;
min-width:10px;
}
Abudayah
fonte
1
Isso não funciona como exigido, quando tenho um conteúdo menor, ele ainda usa largura máxima.
marcovtwout de
largura mínima não se aplica à célula da tabela.
Nick