Autowidth kolumny tabeli CSS


100

Biorąc pod uwagę następujące kwestie, jak dostosować rozmiar mojej ostatniej kolumny do zawartości? (Ostatnia kolumna powinna autosize-width do zawartości. Załóżmy, że mam tylko 1 element li, który powinien się zmniejszyć, zamiast mieć 3 elementy li itp.):

            <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;}

Odpowiedzi:


218

Poniższe rozwiązania rozwiążą Twój problem:

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

Elastyczne rozwiązanie oparte na klasach

Bardziej elastycznym rozwiązaniem jest utworzenie .fitwidthklasy i zastosowanie jej do wszystkich kolumn, w których chcesz mieć pewność, że ich zawartość mieści się w jednym wierszu:

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

A potem w twoim HTML:

<tr>
    <td class="fitwidth">ID</td>
    <td>Description</td>
    <td class="fitwidth">Status</td>
    <td>Notes</td>
</tr>

3
Działa świetnie! (w moim przypadku tabela ma szerokość 100% i żadne inne kolumny nie mają szerokości. Zastosowano to do jednej kolumny). Testowane w IE7 /
8/9

wow, nigdy nie sądziłem, że jest to możliwe w przypadku tabel html. Dziękuję Ci!
kulpae

14
Zamiast ręcznie dodawać klasę „.last”, możesz po prostu wybrać „td: last-child” jako selektor.
T.Ho

3
To rozwiązanie działa dobrze bez table-layout: fixedtego jest ustawione w css w pytaniu jsfiddle.net/hCkch/1
David Sherret

1
Świetnie się spisuje, stary! Naprawdę sprytna sztuczka polegająca na określaniu priorytetów w niektórych kolumnach, aby upewnić się, że nie są one zgniatane w wielu wierszach przez duże kolumny tekstowe, takie jak „Opis” lub „Uwagi”. Niezłe! Aby uczynić to jeszcze bardziej użytecznym, wywołałbym klasę, .fitwidtha następnie po prostu ustawiłbym klasę w kolumnach, których nie chcesz przechodzić do wielu wierszy. Zmienię twoją odpowiedź, żeby to dodać.
Joshua Pinter

25

Jeśli chcesz się upewnić, że ostatni rząd nie zawija się, a tym samym ma odpowiedni rozmiar, spójrz na

td {
 white-space: nowrap;
}

1

Możesz określić szerokość wszystkich komórek tabeli oprócz ostatniej i dodać układ tabeli: stały i szerokość do tabeli.

Możesz ustawić

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

(lub ustaw to dla ostatniego niszczyciela, jak zasugerował Sander).

To zmusza inline-LI do niepękania. Niestety nie prowadzi to do nowego obliczenia szerokości w zawierającym UL (i tym nadrzędnym TD), a zatem nie powoduje automatycznej zmiany rozmiaru ostatniego TD.

Oznacza to: jeśli element inline nie ma określonej szerokości, szerokość TD jest zawsze obliczana automatycznie jako pierwsza (jeśli nie została określona). Następnie jego wbudowana zawartość o tej obliczonej szerokości jest renderowana i white-spacestosowana jest właściwość -właściwość, rozciągająca zawartość poza obliczone granice.

Więc myślę, że nie jest to możliwe bez elementu w ostatnim TD o określonej szerokości.


nie dobrze. to jest dokładnie to, co próbuję usunąć. nie chcę o określać szerokości kol. kolumny powinny mieć rozmiar automatyczny, a ostatnia kolumna powinna być zmniejszona do zawartości wewnątrz.
ShaneKm,

Czy możesz podać definicje CSS dla używanych klas?
acme

-2

użyj automatycznej i minimalnej lub maksymalnej szerokości w ten sposób:

td {
max-width:50px;
width:auto;
min-width:10px;
}

1
To nie działa zgodnie z wymaganiami, gdy mam mniejszą zawartość, nadal używa maksymalnej szerokości.
marcovtwout

min-width nie ma zastosowania do komórki tabeli.
Nick,
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.