Автоматична ширина стовпця таблиці CSS


100

З огляду на наступне, як я можу зробити свій останній стовпець автоматичним розміром для його вмісту? (Останній стовпець повинен надати автоматичну ширину вмісту. Припустимо, у мене є лише 1 елемент li, він повинен скорочуватися порівняно з 3 li елементами тощо):

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

Відповіді:


218

Наступне вирішить вашу проблему:

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

Гнучке рішення на основі класу

А більш гнучким рішенням є створення .fitwidthкласу та застосування цього до будь-яких стовпців, які ви хочете, щоб їх вміст знаходився в одному рядку:

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

А потім у своєму HTML:

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

3
Працює чудово! (мій випадок має ширину таблиці 100%, а інші стовпці не мають ширини. Застосовуйте це до одного стовпця). Перевірено в IE7 /
8/9

Нічого, ніколи не думав, що це можливо за допомогою HTML-таблиць. Дякую!
kulpae

14
Замість того, щоб вручну додавати клас ".last", ви можете просто зробити "td: last-child" як вибір.
Т.Хо

3
Це рішення добре працює, без table-layout: fixedцього встановлено в css у питанні jsfiddle.net/hCkch/1
Девід Шеррет

1
Еффінг блискучий, друже! Дійсно розумний трюк "надати пріоритет" певним стовпцям, щоб переконатись, що вони не сковуються на кілька рядків великими "текстовими" стовпцями, наприклад "Опис" або "Примітки". Хороший! Щоб зробити його ще кориснішим, я би зателефонував до класу, .fitwidthа потім просто встановив клас на стовпці, які ви не хочете переходити до кількох рядків. Я відредагую вашу відповідь, щоб додати її.
Джошуа Пінтер

25

Якщо ви хочете переконатися, що останній ряд не перегорнутий і таким чином розмір, як ви хочете, погляньте

td {
 white-space: nowrap;
}

1

Ви можете вказати ширину всіх, крім останньої комірок таблиці, і додати макет таблиці: фіксований і ширину до таблиці.

Ви можете встановити

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

(або встановіть це для останнього ТД, як замість цього запропонував Сандер).

Це змушує вбудовані ЛІ не руйнуватися. На жаль, це не призводить до нового обчислення ширини в містить UL (і цього батьківського TD), а тому не дає автоматичної зміни останньому TD.

Це означає: якщо вбудований елемент не має заданої ширини, ширина TD завжди спочатку обчислюється автоматично (якщо не вказано). Тоді його вбудований вміст із цією обчисленою шириною стає виведеним і застосовується white-space-властивість, розтягуючи її вміст за обчисленими межами.

Тому я думаю, що це неможливо без наявності елемента в останній TD із визначеною шириною.


не добре. це саме те, що я намагаюся відхилити. я не хочу o вказувати ширину кол. стовпці мають розмір автоматично, а останній стовпчик має бути розміром до вмісту всередині нього.
ShaneKm

Чи можете ви надати CSS-визначення для використовуваних класів?
акме

-2

використовуйте автоматичну та мінімальну або максимальну ширину так:

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

1
Це не працює як потрібно, коли у мене менше вмісту, він все ще використовує максимальну ширину.
marcovtwout

мінімум ширини не застосовується до осередку таблиці.
Нік
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.